/*!
This file is part of PhotoBerry Studio. For licensing and copyright notices, please see ../../license.txt. The SCSS source file is ./admin.scss
*/

// Lightbox

@import "scss/abstracts/variables";
@import "scss/mixins";

@import "./lib/baguetteBox";
@import "masonry";

@import "scss/admin/sessions";
@import "scss/admin/notifications";
@import "scss/admin/welcome";

@import "scss/sidebar";
@import "scss/dialog";
@import "scss/comments";
@import "scss/item-actions";
@import "scss/buttons";

@import "scss/shared/progress";
@import "scss/shared/notices";

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");

/* -------- WordPress -------- */

.photoberry-studio-admin-page {

  background-color : $background-color;

  #wpbody-content {
    font-family : $font;
    }

  #wpcontent {
    padding-left : 0;

    .wrap {
      padding-left  : 2.5vw;
      padding-right : 2.5vw;
      margin-right  : 0;
      }
    }

  #wpfooter {
    z-index : -1;
    }

  .button,
  .button-secondary {
    color        : $primary-color;
    border-color : $primary-color;
    }

  }

/* -------- Header -------- */

.photoberry-studio-admin-page {

  .photoberry-studio-admin-header {
    font-family      : $font;
    font-size        : 18px;
    padding          : 22px 2.5vw;
    background-color: $accent-light;
    color            : #000;

    .photoberry-studio-logo {
      margin-right : 8px;
      flex-shrink  : 0;
      }

    strong {
      font-weight : 500;
      }
    }

  .photoberry-studio-header-wrapper {
    display     : flex;
    align-items : center;
    gap         : 10px;
    flex-wrap   : wrap;

    h1 {
      padding : 0;
      }

    .photoberry-studio-header-buttons-wrapper {
      margin-left : auto;

      a {
        top : unset;
        }
      }
    }

  }

/* -------- Content -------- */

.photoberry-studio-admin-page {

  h1 {
    font-size : 19px;
    }

  h2 {
    font-size : 16px;
    }

  // Inputs
  input[type="text"], input[type=search], textarea, input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="password"], input[type="number"], span.photoberry-studio-input-text, .photoberry-studio-save-required {
    @include input;
    }

  .photoberry-studio-save-required {
    display          : block;
    padding          : 10px 10px;
    box-sizing       : border-box;
    background-color : $background-color;
    }

  span.photoberry-studio-input-text {
    display    : block;
    padding    : 8px 10px;
    box-sizing : border-box;

    abbr {
      width       : 24px;
      height      : 24px;
      line-height : 24px;
      }
    }

  &.wp-core-ui .tablenav select,
  select {
    @include select;
    }

  textarea {
    min-height : 85px;
    }

  &.wp-core-ui .tablenav input.button,
  input.button {
    @include button(secondary, small, false);
    }

  input[type="checkbox"] {
    @include checkboxInput;
    }

  label.photoberry-studio-radio-label {
    position     : relative;
    padding-left : 30px;
    cursor       : pointer;
    }

  input[type="radio"]:not(#list-view-mode, #excerpt-view-mode) {
    @include radio;
    }

  a {
    color           : $primary-color;
    text-decoration : none;
    }

  a:focus {
    box-shadow : unset !important;
    outline    : unset !important;
    }

  .photoberry-studio-client-field-container {
    position   : relative;
    min-height : 35px;
    display    : block;
    box-sizing : border-box;

    li {
      margin-bottom : 0;
      }

    // Main visible field

    .photoberry-studio-selection {
      line-height   : 2em;
      box-sizing    : border-box;
      color         : $text-primary;
      padding       : 5px 25px 5px 10px;
      margin-top    : 0;
      margin-bottom : 0;
      cursor        : pointer;
      @include select;

      & {
        min-height : 44px;
        }

      > li:not(.photoberry-studio-select-clients) {
        display          : flex;
        align-items      : center;
        padding          : 4px 6px;
        background-color : #fff;
        border-radius    : 5px;
        margin-right     : 8px;
        margin-bottom    : 8px;
        max-width        : 100%;

        &:last-child {
          margin-bottom : 0;
          }
        }

      li.photoberry-studio-select-clients {
        min-height : 12px;
        display    : inline-block;
        }

      abbr {
        width        : 25px;
        min-width    : 25px;
        height       : 25px;
        line-height  : 25px;
        font-size    : 11px;
        margin-right : 6px;
        }

      span {
        line-height   : 1.35em;
        flex-grow     : 1;
        min-width     : 0;
        overflow      : hidden;
        text-overflow : ellipsis;
        white-space   : nowrap;
        max-width     : 100%;
        }

      // Delete Client

      .photoberry-studio-remove {
        background-image : url("../img/icons/black/close.svg");
        margin-left      : 8px;
        box-shadow       : unset;
        @include button(primary, small, true);

        & {
          width  : 20px;
          height : 20px;
          }
        }

      // Default state when no client selected
      .photoberry-studio-empty {
        padding : 8px 10px;
        }
      }

    &.photoberry-studio-client-field-single .photoberry-studio-selection > li {
      margin-bottom : 0;
      }

    .photoberry-studio-client-field-choices {
      max-height       : 190px;
      overflow-y       : scroll;
      overflow-x       : hidden;
      position         : absolute;
      width            : 100%;
      box-shadow       : $box-shadow-light;
      border-radius    : 0 0 5px 5px;
      background-color : #fff;
      padding          : 5px;
      box-sizing       : border-box;
      z-index          : 999;

      > ul {
        padding : 5px 0 5px;
        margin  : 0;

        li {
          margin-bottom : 0;
          font-size     : 12px;

          a {
            color         : $text-primary;
            display       : block;
            padding       : 6px 10px;
            overflow      : hidden;
            text-overflow : ellipsis;
            white-space   : nowrap;
            }

          a:hover {
            background-color : $background-color;
            }
          }
        }

      abbr {
        width       : 30px;
        min-width   : 30px;
        height      : 30px;
        line-height : 30px;
        font-size   : 12px;
        }

      input[type="search"] {
        width            : 100%;
        background-color : #fff;

        // X icon
        &::-webkit-search-cancel-button {
          cursor    : pointer;
          font-size : 14px;
          filter    : grayscale(1);
          }
        }
      }

    select#photoberry-studio-field-session-email-to,
    select#photoberry-studio-filter-session-client,
    select#photoberry-studio-field-session-client,
    select#photoberry-studio-field-gallery-client {
      display : none;
      }

    // detect whether the select field is open/active
    &:has(.photoberry-studio-client-field-choices) {
      visibility : visible;
      opacity    : 1;
      }

    ul.photoberry-studio-loading {

      &::after {
        display : none; // Default preloader
        }

      li {
        padding     : 10px 10px 10px 16px;
        margin-left : 25px;
        position    : relative;

        &::after {
          content          : "";
          top              : 50%;
          left             : 0;
          width            : 16px;
          height           : 16px;
          margin-left      : -8px;
          margin-top       : -8px;
          background-image : url("../img/icons/gray/spinner-solid.svg");
          background-size  : cover;
          display          : block;
          position         : absolute;
          animation        : photoberry-studio-rotation 2s infinite ease;
          z-index          : 3;
          margin-right     : 10px;
          }
        }
      }

    }

  .photoberry-studio-button-icon {
    @include button(primary, small, true);
    }

  .photoberry-studio-button-icon-secondary {
    @include button(secondary, small, true);
    }

  .photoberry-studio-button-icon-medium {
    @include button(primary, medium, true);
    }

  .photoberry-studio-button-icon-medium-secondary {
    @include button(secondary, medium, true);
    }

  .photoberry-studio-button-icon-undo {
    background-image : url(../img/icons/gray/undo.svg);
    }

  .photoberry-studio-button-icon-open-in-new {
    background-image : url(../img/icons/gray/open_in_new.svg);
    }

  .photoberry-studio-button-icon-collections {
    background-image : url(../img/icons/gray/collections.svg);
    }

  .photoberry-studio-button-icon-delete {
    background-image : url(../img/icons/gray/delete.svg);
    }

  .photoberry-studio-button-icon-delete:hover {
    background-image : url(../img/icons/delete-red.svg);
    }

  .photoberry-studio-button-icon-settings {
    background-image : url(../img/icons/gray/settings.svg);
    }

  .photoberry-studio-button-icon-reset {
    background-image : url(../img/icons/gray/undo.svg);
    }

  .photoberry-studio-button-icon-collapse-close {
    background-image : url(../img/icons/gray/collapse-close.svg);
    }

  .photoberry-studio-button-icon-collapse-open {
    background-image : url(../img/icons/gray/collapse-open.svg);
    }

  .photoberry-studio-button-icon-copy {
    background-image : url(../img/icons/gray/content-copy.svg);
    }

  .photoberry-studio-button-icon-star {
    background-image : url(../img/icons/gray/star.svg);
    }

  .photoberry-studio-button-icon-notification {
    background-image : url(../img/icons/black/notification.svg);
    }

  h1 {
    @include h1;
    }

  .wp-header-end {
    visibility    : visible;
    margin-top    : 15px;
    margin-bottom : 15px;
    border-color  : $gray-2;
    border-top    : 0;
    }

  .photoberry-studio-field-wrapper:has(table.photoberry-studio-client-credentials) {
    grid-template-columns : minmax(80px, 140px) minmax(400px, 910px) 30px;
    }

  .photoberry-studio-field-wrapper:has(select.photoberry-studio-select-url) {
    grid-template-columns : minmax(80px, 140px) minmax(200px, 450px) minmax(200px, 450px) 30px;
    }

  .photoberry-studio-field-wrapper-credentials .photoberry-studio-info {
    grid-column : 2 / 3;
    }

  table.photoberry-studio-sharing-urls {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    text-align  : left;

    tr {
      display        : flex;
      flex-direction : column;
      flex           : 1 1 auto;
      align-items    : flex-start;
      margin-top     : 10px;
      }

    td {
      flex          : 1;
      padding       : 10px 0;
      margin-bottom : 15px;
      }

    th {
      flex : 1;
      }

    .photoberry-studio-note {
      font-size  : 12px;
      margin-top : 12px;
      color      : $gray-6;
      }
    }

  table.photoberry-studio-client-credentials {
    text-align : left;
    width      : 100%;

    tr th {
      font-weight : 400;
      font-size   : 12px;
      }

    input {
      width : 100%;
      }

    tbody {
      display        : flex;
      flex-direction : column;
      gap            : 5px;
      }

    tr {
      display        : flex;
      flex-direction : row;
      gap            : 10px;
      }

    th, td {
      flex       : 1;
      padding    : 0 0 10px;
      text-align : left;
      }

    .photoberry-studio-note {
      font-size  : 12px;
      margin-top : 5px;
      color      : $gray-6;
      }

    }

  // Bulk Actions

  .bulkactions .search-box {
    float         : unset;
    margin-right  : 20px;
    margin-bottom : 10px;
    }

  .actions {
    display       : flex;
    flex-wrap     : wrap;
    margin-bottom : 10px;
    align-items   : flex-start
    }

  // Search

  .photoberry-studio-search,
  .search-box {

    margin : 0;

    input[type=search] {

      // X icon
      &::-webkit-search-cancel-button {
        cursor    : pointer;
        font-size : 14px;
        filter    : grayscale(1);
        }

      @media (min-width : 1200px) {
        min-width : 220px;
        }
      @media (max-width : 782px) {
        width : calc(100% - 110px);
        }
      }
    }

  // Breadcrumbs

  ul.photoberry-studio-admin-breadcrumbs {
    list-style  : none;
    padding     : 15px 2.5vw 0;
    font-size   : 13px;
    font-weight : 400;

    li {
      display      : inline-block;
      margin-right : 5px;

      &:after {
        content     : ">";
        font-weight : 400;
        margin-left : 5px;
        color       : $gray-4;
        }

      &:last-of-type:after {
        content : none;
        }
      }

    a {
      color           : $gray-4;
      text-decoration : none;

      &:focus {
        box-shadow : unset;
        outline    : unset;
        }

      &:hover {
        color : $primary-color;
        }
      }
    }

  // Table

  table.wp-list-table.widefat {
    border        : unset;
    border-radius : 5px;
    border: 1px solid $gray-2;

    .column-actions .row-actions {
      span:not(:last-of-type) {
        margin-right : 5px;
        }
      }

    &.fixed .column-status {
      width : 90px;
      }

    thead td.check-column, tbody .check-column, tfoot .check-column {
      padding : 8px 8px;
      }

    // Center
    thead td.check-column, tfoot .check-column, td, thead th, thead td, tfoot td, tfoot th {
      vertical-align : middle;
      }

    tbody .check-column, td {
      vertical-align : top;
      }

    thead th, thead td, tfoot td, tfoot th {
      border-color : $gray-2;
      font-size    : 13px;
      background-color: $gray-1;
      font-weight : bold;

      a {
        font-weight : 500;
        color       : $text-primary;
        max-width   : 100%;

        &:hover {
          color : $primary-color;
          }
        }
      }

    .alternate, tbody > :nth-child(odd) {
      background-color : $background-color !important;
      }

    thead {
      font-weight : 500;

      th {
        padding-top    : 6px;
        padding-bottom : 10px;
        color          : $text-primary;
        }
      }

    tbody {

      .column-client_name {
        a {
          display     : flex;
          align-items : center;
          cursor      : pointer;

          abbr {
            flex : 0 0 36px;
            }
          }
        }

      .column-email a {
        cursor : pointer;
        }

      .column-title {

        img {
          vertical-align : middle;
          margin-right   : 8px;
          max-height     : 240px;
          max-width      : 120px;
          float          : left;
          height         : auto;
          }

        > a {
          font-weight : 600;
          font-size   : 14px;
          clear       : both;
          }
        }

      .column-actions {
        .row-actions {
          left : 0;
          }
        }
      }

    }

  .tablenav.top {
    margin-bottom : 20px;

    a {
      display : inline-block;
      }
    }

  // Pagination

  .pagination-links {
    input {
      min-height : 30px;
      }
    }

  // Settings, Fields, Inputs

  .photoberry-studio-field-wrapper {
    display               : grid;
    grid-template-columns : minmax(80px, 140px) minmax(200px, 450px) 30px;
    align-items           : start;
    gap                   : 10px;
    padding-bottom        : 20px;

    @media (max-width : 400px) {
      grid-template-columns : 1fr;
      }

    legend,
    label {
      margin-top : 12px;
      @include label;

      }

    p {
      margin : 0;
      }

    input, textarea {
      padding : 8px 10px;
      }

    input[type="date"], input[type="time"] {
      padding : 3px 10px;
      }

    select {
      max-width : 450px;
      padding   : 8px 10px;

      &:hover {
        color : $primary-color
        }
      }

    > input[type="checkbox"] {
      margin-top : 10px;
      }

    &.photoberry-studio-field-wrapper-column {
      grid-template-columns : 1fr;

      > ul {
        margin-top: 0;
        }
    }

    &.photoberry-studio-field-wrapper-inline {

      grid-template-columns : 25px 1fr;

      input[type="checkbox"] {
        margin-top : 10px;
        }
      }

    .photoberry-studio-field-copy-text {

      @include input;

      & {
        padding               : 4px 10px;
        min-height            : 44px;
        box-sizing            : border-box;
        max-width             : 450px;
        display               : grid;
        grid-template-columns : 1fr auto auto;
        align-items           : center;
        gap: 3px;
        }

      a {
        align-self : center;
        }

      a.photoberry-studio-button-icon-secondary {
        background-image : url("../img/icons/gray/qr-code.svg");
        background-size: 20px;
        }
      button {
        background-image : url("../img/icons/gray/content-copy.svg");
        background-size: 18px;
        }
      }

    button.photoberry-studio-remove.photoberry-studio-button-text {
      display       : inline-block;
      margin-bottom : 10px;
      margin-top    : 10px;
      max-width     : 100px;
      @include buttonRemove();
      }

    .photoberry-studio-note {
      font-size  : 12px;
      margin-top : 12px;
      color      : $gray-6;
      }

    // Tooltip
    .photoberry-studio-field-tooltip {

      cursor              : pointer;
      user-select         : none; /* Standard syntax */
      -webkit-user-select : none; /* Safari */
      -moz-user-select    : none; /* Firefox */
      -ms-user-select     : none; /* Internet Explorer/Edge */
      position            : relative;

      .photoberry-studio-tooltip-icon {
        font-weight      : 800;
        font-size        : 12px;
        line-height      : 25px;
        background-color : $gray-1;
        width            : 25px;
        height           : 25px;
        display          : inline-block;
        border-radius    : 50%;
        text-align       : center;
        margin-top       : 4px;

        &:hover {
          + .photoberry-studio-tooltip-content {
            display          : block;
            position         : absolute;
            top              : -5px;
            right            : 35px;
            background-color : #fff;
            width            : 250px;
            padding          : 15px;
            border-radius    : 5px;
            box-shadow       : $box-shadow-light;
            border           : 1px solid $gray-2;
            }
          }
        }

      .photoberry-studio-tooltip-content {
        display : none;
        }

      @media (max-width : 600px) {

        @media (min-width : 401px) {
          grid-row-start    : 2;
          grid-column-start : 1;
          grid-column-end   : 3;
          }

        margin-top    : 10px;
        margin-bottom : 15px;

        .photoberry-studio-tooltip-content {
          position : relative;
          }
        .photoberry-studio-tooltip-icon {
          display : none;
          }
        .photoberry-studio-tooltip-content {
          display : block
          }

        }
      }

    }

  .photoberry-studio-field-wrapper.photoberry-studio-field-fw {
    grid-template-columns : 1fr;
    }

  .photoberry-studio-translation-fields {
    grid-template-columns : 1fr;

    dt {
      margin-bottom : 8px;
      font-weight   : bold;
      }

    dd {
      margin-left   : 0;
      margin-bottom : 20px;

      input {
        width     : 100%;
        max-width : 1200px;
        }
      }
    }

  .photoberry-studio-values-list {

    ul {
      margin  : 0;
      padding : 0;
      }

    li {
      position : relative;
      }

    input {
      width         : 100%;
      padding-right : 35px;
      }
    }
  }

.photoberry-studio-button-icon-remove {
  background-image : url("../img/icons/black/close.svg");
  }

// Buttons

.photoberry-studio-button-icon-absolute {
  position  : absolute;
  right     : 5px;
  top       : 50%;
  transform : translateY(-50%);
  }

.photoberry-studio-button.photoberry-studio-button-primary.photoberry-studio-button-large {
  @include button(primary, large, false);
  }

.photoberry-studio-button.photoberry-studio-button-secondary.photoberry-studio-button-large {
  @include button(secondary, large, false);
  }

.photoberry-studio-button.photoberry-studio-button-secondary {
  @include button(secondary, medium, false);
  }

.photoberry-studio-button.photoberry-studio-button-primary.photoberry-studio-button-small {
  @include button(primary, small, false);
  }

// Tabs

.photoberry-studio-admin-page .photoberry-studio-tabs-nav {
  border-top    : 1px solid $gray-2;
  border-bottom : 1px solid $gray-2;
  padding       : 8px 0 0 0;
  margin-bottom : 0;

  li {
    display       : inline-block;
    margin-bottom : -1px;
    }

  a {
    color       : $text-primary;
    font-size   : 13px;
    padding     : 10px 15px 15px 15px;
    font-weight : 400;
    display     : inline-block;

    }

  li.photoberry-studio-active {
    a {
      color         : $primary-color;
      font-weight   : 500;
      border-bottom : 2px solid $primary-color;
      }
    }

  }

.photoberry-studio-admin-page .photoberry-studio-tabs-contents {

  > div {
    display    : none;
    margin-top : 30px;
    }

  > div.photoberry-studio-active {
    display : block;
    }
  }

// Subtabs

.photoberry-studio-admin-page .photoberry-studio-tabs-contents > div:has(.photoberry-studio-tabs-subnav) {
  margin-top : 0;
  }

.photoberry-studio-admin-page .photoberry-studio-tabs-nav.photoberry-studio-tabs-subnav {
  margin-top  : 0;
  border-top  : 0;
  padding-top : 0;

  a {
    font-size : 12px;
    padding   : 12px 20px 12px 14px;
    }

  li.photoberry-studio-active > a {
    border-color : $text-primary;
    color        : $text-primary;
    }
  }

// Tabs Container

.photoberry-studio-admin-page .photoberry-studio-tabs-container {

  border        : unset;
  //box-shadow       : $box-shadow-light;
  //border-radius    : 5px;
  //background-color : #fff;
  margin-bottom : 25px;
  //padding-top      : 15px;

  .wp-header-end {
    display : none;
    }

  h1 {
    //padding-left : 1.5vw;
    }

  .photoberry-studio-contents {
    padding-bottom : 30px;
    min-width      : 500px;
    }

  .photoberry-studio-tabs-contents {
    padding-bottom : 10px;
    }
  }

// Cards

.photoberry-studio-cards {
  display               : grid;
  gap                   : 25px;
  grid-template-columns : 1fr 1fr;

  @media (max-width : 1024px) {
    grid-template-columns : 1fr;
    }
  }

.photoberry-studio-card {
  background-color : #fff;
  border           : 1px solid $gray-2;
  border-radius    : 8px;
  padding          : 0;

  .photoberry-studio-card-header-wrapper {
    padding     : 1em 20px;
    display     : flex;
    align-items : center;
    min-height  : 30px;

    }

  .photoberry-studio-card-body {
    padding : 0 20px 20px;
    }

  .photoberry-studio-card-header-wrapper {
    margin-bottom : 25px;
    border-bottom : 1px solid $gray-2;

    .photoberry-studio-card-buttons-wrapper {
      margin-left : auto;
      }

    h2 {
      margin    : 0;
      font-size : 15px;
      display   : inline-block;
      }
    }
  }

/*--------  Gallery Page -------- */

.photoberry-studio-admin-page .wrap {

  .page-title-action {
    margin-left : 10px;
    @include button(primary, small)
    }

  > .page-title-action {
    float : right;
    }

  h1.wp-heading-inline {
    @include h1;
    }

  // Hide add photos button when clicked
  div[data-tab="photos"].photoberry-studio-adding-items > a.photoberry-studio-button-items-add {
    display : none;
    }

  a.photoberry-studio-button-items-add {
    display    : inline-block;
    text-align : center;
    }

  ul.subsubsub {
    margin-bottom : 35px;
    }

  .photoberry-action-buttons-wrapper {
    margin-bottom : 10px;

    a {
      display    : inline-block;
      text-align : center;
      }
    }

  @media (min-width : 782px) {
    .photoberry-action-buttons-wrapper {
      float : right;
      }
    }

  // Toolbar

  .photoberry-studio-gallery-items-toolbar {
    margin-bottom : 20px;

    > * {
      display       : inline-block;
      margin-right  : calc(10px + 0.2vw);
      margin-bottom : 10px;
      }

    @media (max-width : 782px) {

      .photoberry-studio-search input[type=search] {
        width : auto
        }

      }

    .photoberry-studio-view-switcher {
      display        : inline-flex;
      gap            : 8px;
      vertical-align : middle;

      label {
        display     : flex;
        align-items : center;
        cursor      : pointer;

        input {
          display : none;
          }

        .photoberry-icon-list {
          content : url("../img/icons/gray/list.svg");
          }

        .photoberry-icon-grid {
          content : url("../img/icons/gray/grid.svg");
          }

        input:checked {
          + .photoberry-icon-list {
            content : url("../img/icons/black/list.svg");
            }
          }

        input:checked {
          + .photoberry-icon-grid {
            content : url("../img/icons/black/grid.svg");
            }
          }

        }

      }
    }

  .photoberry-studio-selection-controls {

    > span {
      margin-right : 10px;
      font-size    : 12px;
      display      : none;
      }

    .photoberry-studio-select-clear {
      margin-left : 5px;
      display     : none;
      }

    &.photoberry-studio-active {
      > span, .photoberry-studio-select-clear {
        display : inline-block;
        }
      }

    }

  .photoberry-studio-select-all {
    margin-bottom : 15px;
    }

  .photoberry-studio-gallery-contents {
    &.photoberry-studio-grid .photoberry-studio-gallery-items {
      display               : grid;
      gap                   : 16px;
      grid-template-columns : repeat(auto-fill, minmax(min(100%, max(300px, 100% / 7)), 1fr));

      > li {
        margin-bottom    : 0;
        border: 1px solid $gray-2;
        background-color : #fff;

        &:hover {
          .photoberry-studio-item-actions {
            opacity : 1;
            }
          }

        }

      .photoberry-studio-item-thumbnail {
        display       : block;
        margin-bottom : 5px;
        position      : relative;

        img {
          display          : block;
          min-height       : 100px;
          max-width        : 100%;
          background-color : $gray-1
          }

        a:before {
          position   : absolute;
          display    : block;
          content    : "";
          width      : 100%;
          height     : 100%;
          top        : 0;
          left       : 0;
          opacity    : 0;
          background : linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 8.1%, rgba(0, 0, 0, 0.001) 15.5%, rgba(0, 0, 0, 0.003) 22.5%, rgba(0, 0, 0, 0.005) 29%, rgba(0, 0, 0, 0.008) 35.3%, rgba(0, 0, 0, 0.011) 41.2%, rgba(0, 0, 0, 0.014) 47.1%, rgba(0, 0, 0, 0.016) 52.9%, rgba(0, 0, 0, 0.019) 58.8%, rgba(0, 0, 0, 0.029) 64.7%, rgba(0, 0, 0, 0.029) 71%, rgba(0, 0, 0, 0.1) 82.5%, rgba(0, 0, 0, 0.15) 84.5%, rgba(0, 0, 0, 0.35) 91.9%, rgba(0, 0, 0, 0.5) 100%);
          transition : all 0.5s;
          z-index    : 997;
          }

        &:hover a:before {
          opacity : 1;
          }

        .photoberry-studio-error {
          padding : 30px 30px 55px;

          img {
            height           : 75px;
            width            : 75px;
            margin           : auto;
            background-color : transparent;
            }

          p {
            text-align : center;
            color      : $text-primary;
            }
          }

        }

      .photoberry-studio-item-actions {
        position   : absolute;
        bottom     : 0;
        right      : 0;
        text-align : right;
        opacity    : 0;
        z-index    : 999;
        }

      a {
        display : block;

        img {
          height  : 100%;
          display : block;
          margin  : auto;
          }
        }

      .photoberry-studio-item-title label {
        display        : block;
        padding-top    : 10px;
        padding-bottom : 10px;
        cursor         : pointer;
        }
      }

    &.photoberry-studio-list .photoberry-studio-gallery-items {
      column-gap : 16px;

      > li {
        margin-bottom  : 16px;
        border: 1px solid $gray-2;
        display        : flex;
        flex-direction : column;
        gap            : 10px;
        position       : relative;

        .photoberry-studio-item-title {
          order : 1;

          label {
            padding-top : 0;
            }
          }

        .photoberry-studio-item-thumbnail {
          order     : 2;
          display   : flex;
          flex-wrap : wrap;

          .photoberry-studio-item-actions {
            padding-top  : 0;
            padding-left : 0;
            }
          }
        }

      a {
        width         : 160px;
        margin-bottom : 10px;
        margin-right  : 15px;

        img {
          max-height : 160px;
          max-width  : 160px;
          width      : auto;
          height     : auto;
          display    : block;
          }
        }

      .photoberry-studio-item-title label {
        display        : block;
        padding-top    : 10px;
        padding-bottom : 10px;
        cursor         : pointer;
        }
      }
    }

  }

/* Admin Gallery */

.photoberry-studio-gallery-items {

  > li {
    padding       : 15px;
    border-radius : 5px;
    border        : 2px solid $gray-1;

    &:has(input:checked) {
      border : 2px solid $primary-color;
      }

    }
  }

.photoberry-studio-gallery-items > li {

  &:hover {
    .photoberry-studio-item-actions {
      opacity    : 1;
      visibility : visible;
      }

    .photoberry-studio-item-statuses .photoberry-studio-status-suggested {
      opacity    : 0;
      visibility : hidden;
      display    : none;
      }

    .photoberry-studio-item-statuses .photoberry-studio-status-final {
      opacity    : 0;
      visibility : hidden;
      display    : none;
      }

    }

  }

.photoberry-studio-item-statuses {
  transition : all 0.5s;
  display    : block;
  position   : absolute;
  top        : 0;
  right      : 0;
  z-index    : 998;

  > li.photoberry-studio-button-icon {
    display       : inline-block;
    margin-left   : 5px;
    border-radius : 50%;
    border: 1px solid $gray-2;
    box-shadow    : 0 0 10px rgba(0, 0, 0, 0.05);
    transition    : all 0.5s;

    &:hover {
      background-color : #fff;
      cursor           : default;
      border-radius    : 50%;
      }

    }
  .photoberry-studio-status-client-selected {
    background-image : url("../img/icons/check-blue.svg");

    // Multiclient
    > span {
      display: inline-block;
      margin-top: 30px;
      text-align: right;

      abbr.photoberry-studio-client-abbr {
        background-color : #fff;
        margin-top       : 4px;
        margin-right     : 2px;
        color: $gray-6;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        }

      }

    }

  .photoberry-studio-status-final {
    background-image : url("../img/icons/verified-blue-modified.svg");

    }

  .photoberry-studio-status-suggested {
    background-image : url("../img/icons/star-blue.svg");
    }

  &:not(:last-of-type) {
    margin-right : 7px;
    }

  }

ul.photoberry-studio-gallery-items li:hover .photoberry-studio-status-suggested {
  opacity    : 0;
  visibility : hidden;
  }

.photoberry-studio-suggested .photoberry-studio-item-actions li.photoberry-studio-action-suggest button {
  background-image : url("../img/icons/star-blue.svg");
  }

.photoberry-studio-admin-page .photoberry-studio-items-add {
  display    : none;
  margin-top : 35px;

  &.photoberry-studio-active {
    display : block;
    }

  .photoberry-loader {
    width               : 30px;
    height              : 30px;
    margin              : 0 auto 15px;
    background-color    : #f7f5ff;
    border-radius       : 50%;
    border              : 3px solid #f7f5ff;
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : 18px;
    background-image    : url("../img/icons/gray/spinner-solid.svg");
    animation           : photoberry-studio-rotation 2s infinite ease;
    opacity             : 0;
    visibility          : hidden;
    transition          : all 0.5s;
    }

  &.photoberry-studio-uploading {

    position : relative;

    #drag-drop-area .drag-drop-inside {
      margin : 40px auto 0;
      }

    #drag-drop-area p:not(.drag-drop-info) {
      display : none;
      }

    .photoberry-loader {
      opacity    : 1;
      visibility : visible;
      }
    }

  // Drag and drop

  #drag-drop-area {
    border : 2px dashed $gray-2;
    height : 210px;

    .drag-drop-inside {
      margin     : 20px auto 0px;
      transition : all 0s;
      max-width  : 250px;
      }

    .drag-drop-inside p.drag-drop-info {
      font-size   : 16px;
      font-weight : 500;
      }

    .drag-drop-inside p {
      display    : block;
      text-align : center;
      }
    }

  .max-upload-size, .photoberry-studio-upload-note {
    color     : $gray-4;
    font-size : 12px;
    }

  }

/*--------  Forms -------- */

.photoberry-sr-only {
  font-size   : 0 !important;
  visibility  : hidden;
  margin      : 0;
  padding     : 0;
  line-height : 0;
  }

// Client edit page

.photoberry-studio-client-import p {
  margin-top    : 20px;
  margin-bottom : 20px;
  }

.photoberry-studio-client-abbr {
  width            : 36px;
  height           : 36px;
  color            : $primary-color;
  background-color : $gray-2;
  display          : inline-block;
  border-radius    : 50%;
  font-size        : 13px;
  font-weight      : bold;
  line-height      : 36px;
  text-align       : center;
  text-transform   : uppercase;
  text-decoration  : none;
  margin-right     : 10px;

  &.photoberry-studio-client-abbr-small {
    width        : 25px;
    min-width    : 25px;
    height       : 25px;
    line-height  : 25px;
    font-size    : 11px;
    margin-right : 6px;
    }
  }

.client_name {
  span {
    color         : $text-primary;
    font-weight   : bold;
    text-overflow : ellipsis;
    overflow      : hidden;
    white-space   : nowrap;
    }

  }

.photoberry-studio-field-wrapper input {
  .photoberry-studio-field-value {
    display : none;
    }
  }

/* Radio list */

ul.photoberry-studio-field-radio-list {
  margin  : 12px 0 0;
  padding : 0;

  li {
    margin-bottom : 25px;
    position      : relative;

    label > span {
      display        : inline-flex;
      flex-direction : column;
      max-width      : calc(100% - 30px); // padding-left
      }

    .photoberry-studio-field-radio-list-title {
      font-size     : 13px;
      margin-bottom : 5px;
      }

    .photoberry-studio-field-radio-list-description {
      font-size   : 13px;
      font-weight : normal;
      }
    }

  }

/* Checkbox list */

ul.photoberry-studio-field-checkbox-list {
  margin  : 12px 0 0;
  padding : 0;

  li {
    margin-bottom : 25px;
    position      : relative;

    label {
      font-size   : 13px;
      font-weight : 500;
      color       : #160342;
      }

    label > span {
      margin-top     : 12px;
      display        : inline-flex;
      flex-direction : column;
      max-width      : calc(100% - 30px); // padding-left
      }

    .photoberry-studio-field-checkbox-list-title {
      font-size     : 13px;
      margin-bottom : 5px;
      }

    .photoberry-studio-field-checkbox-list-description {
      font-size   : 13px;
      font-weight : normal;
      }
    }

  }

//the form is currently not in edit mode
.photoberry-studio-field-wrapper:has(.photoberry-studio-field-value) {

  margin-top : 12px;

  label {
    margin-top : 0;
    }

  input, textarea, select, .photoberry-studio-selection {
    display : none;
    }

  .photoberry-studio-field-value {
    display : block;
    }

  .photoberry-studio-field-tooltip {
    display : none;
    }

  }

// Margins

.photoberry-studio-mb-small {
  margin-bottom : 30px;
  }

.photoberry-studio-ml-md {
  margin-left : 10px;
  }


// Other

.photoberry-studio-inline-block {
  display : inline-block;
  }

.photoberry-studio-text-align-center {
  text-align : center;
  }

.photoberry-studio-border-box {
  box-sizing : border-box;
  }


.photoberry-studio-admin-page div[data-lastpass-icon-root] {
  display : none !important;
  }

.photoberry-studio-input {
  @include input;
  }

// Admin page, overwrite WordPress hover

.row-actions .delete a.photoberry-studio-button-icon-delete:hover {
  border: 1px solid #d7dbec;
  }

#screen-meta-links {
  display: none;
  }