/*
 * 11.2 - Settings Header
 */

#ags-xoiwc-settings-header {
  background      : #fff;
  position        : relative;
  padding         : 16px 23px;
  justify-content : space-between;
  display         : flex;
  flex-wrap       : wrap;
  align-items     : center;
  border-radius: 5px 5px 0 0;
  font-family     : $fontGeneral;
  font-weight     : 600;

  .ags-xoiwc-settings-logo {

    display     : flex;
    align-items : center;
    row-gap: 15px;

    @media (max-width : 750px) {
      justify-content : center
      }

    @media (max-width : 500px) {
      flex-direction: column;
      }

    img {
      display        : inline-block;
      vertical-align : middle;
      margin-right   : 10px;
      width          : 35px;
      }
    h1 {
      margin         : 0;
      color          : $dsDarkPurple;
      font-size      : 15px;
      font-weight    : 600;
      display        : inline-block;
      vertical-align : middle;
      }

  @media (max-width : 660px) {
      justify-content : center;

      .ags-xoiwc-settings-logo {
        width      : 100%;
        margin     : 0 auto 8px;
        text-align : center;
        }

      #ags-xoiwc-settings-header-links {
        text-align : center;
        }
      }

    }
  }

#ags-xoiwc-settings-header-links a {
  text-decoration     : none;
  color               : $dsMainPurple ;
  font-size           : 12px;
  font-weight         : 500;
  padding             : 8px;
  display             : inline-block;
  border-radius       : 4px;
  background-size     : 14px;
  background-repeat   : no-repeat;
  background-position : left center;
  box-shadow          : none;

  &:hover {
    opacity : 1;
  }

  &.active {
    opacity : 1;
  }

  &:first-of-type {
    margin-left : 0;
  }
}

#ags-xoiwc-settings-header-link-settings {
  background-image : url(../images/settings.svg);
}

#ags-xoiwc-settings-header-link-support {
  background-image : url(../images/help.svg);
}

#ags-xoiwc-settings-header-link-upgrade {
  background-image : url(../images/upgrade_pro.svg);
}

#ags-xoiwc-settings-header-link-review {
  background-image : url(../images/review.svg);
}


#ags-xoiwc-settings-header-link-support {
  background-image : url(../images/documentation.svg);
  }