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

// Lightbox

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

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

@import "scss/gallery";
@import "scss/comments";
@import "scss/sidebar";
@import "scss/dialog";
@import "scss/item-actions";
@import "scss/buttons";
@import "scss/sessions_header";
@import "scss/sessions";
@import "scss/my_sessions";

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

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

.photoberry-container {
  max-width  : var(--ps-section-width);
  margin     : auto;
  text-align : center;
  }

.photoberry-invite.photoberry-container {
  padding : 60px 0;
  min-height: 85vh;
  background-color: transparent;
  }

.photoberry-authentication {
  max-width       : 90%;
  margin          : auto;
  text-align      : center;
  min-height      : 60vh;
  display         : flex;
  justify-content : center;
  align-items     : center;
  flex-direction  : column;

  .photoberry-error, p {
    margin-bottom : 35px;
    font-size     : 14px;
    font-weight   : 500;
    }

  .photoberry-error {
    border        : 1px solid $accent-red;
    border-radius : 5px;
    padding       : 8px 20px 8px 45px;
    padding-bottom: 8px!important; // theme overwrite
    color         : $accent-red;
    position      : relative;
    text-align    : left;

    &::before {
      content         : "";
      position        : absolute;
      left            : 8px;
      top             : 50%;
      transform       : translateY(-50%);
      width           : 25px;
      height          : 25px;
      border          : 1px solid $accent-red;
      border-radius   : 50%;
      background      : url(../img/icons/notices/error-red.svg) no-repeat center;
      background-size : 15px;
      }
    }

  .photoberry-success {
    border        : 1px solid $accent-green;
    border-radius : 5px;
    padding       : 8px 20px 8px 45px;
    padding-bottom: 8px!important; // theme overwrite
    color         : $accent-green;
    font-weight   : bold;
    position      : relative;
    text-align    : left;

    &::before {
      content         : "";
      position        : absolute;
      left            : 8px;
      top             : 50%;
      transform       : translateY(-50%);
      width           : 25px;
      height          : 25px;
      border-radius   : 50%;
      background      : $accent-green url(../img/icons/notices/success.svg) no-repeat center;
      background-size : 15px;
      }
    }

  @media (min-width : 981px) {
    .photoberry-error {
      min-width : 400px;
      }
    }

  .photoberry-form {
    width      : 100%;
    max-width  : 400px;
    text-align : left;

    input {
      width : 100%;
      }

    .photoberry-studio-password-info {
      font-size: 11px;
      font-weight: normal;
      color:$gray-6
      }

    }

  }


.photoberry-invite .photoberry-authentication {
  justify-content: flex-start;
  }

// Tabs
#photoberry-invite-tabs {
  display    : flex;
  gap        : 4px;
  list-style : none;
  padding    : 0;
  margin     : 10px 0 20px 0;

  li {
    border           : 1px solid $gray-3;
    padding          : 0;
    background-color : $gray-2;
    border-radius    : 5px;

    a {
      font-size       : 14px;
      color           : $gray-6;
      font-weight     : 400;
      text-decoration : none;
      padding          : 6px 20px;
      display: inline-block;

      &:focus {
        outline : unset;
        }
      }
    }

  li.photoberry-studio-active {
    background-color : #fff;
    border-color     : $primary-color;

    a {
      color       : $primary-color;
      font-weight : 700;
      }
    }

  }

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

.photoberry-studio-buttons-wrapper .photoberry-studio-button.photoberry-studio-button-secondary.photoberry-studio-button-small,
.photoberry-studio-button.photoberry-studio-button-secondary.photoberry-studio-button-small {
  @include button(secondary, small, false);
  }

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