/*!
_session_header.scss
Source file (relative to compiled *.css file): ./scss/_session_header.scss

This file is included in PhotoBerry Studio. For licensing and copyright notices, please see ../../license.txt (relative to *.css file) or ../../../license.txt (relative to *.scss file).
*/
#photoberry-session-header {
  background-color : var(--ps-background-color-header);
  box-shadow       : var(--ps-box-shadow-header);
  min-height: 75px;
  position         : sticky;
  z-index          : 999;
  top              : 0;
  left             : 0;
  display: flex;

  nav {
    width           : var(--ps-section-width);
    max-width       : var(--ps-max-section-width);
    margin          : auto;
    padding-top     : 10px;
    padding-bottom  : 10px;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    gap             : 15px;
    align-items     : center;
    justify-content : space-between;
    }

  .photoberry-session-nav-right {
    display: inline-flex;
    gap: 8px;

    form {
       margin-bottom: 0;
      }
    }

  .photoberry-studio-user {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;

    img {
      border-radius: 50%;
      transition: all 0.2s ease-in-out;
      width: 34px;
      height: 34px;
      }

    span {
      opacity: 0;
      position: absolute;
      font-size: 13px;
      right: 0;
      top: 36px;
      display: block;
      @include  container;
      box-shadow: $box-shadow-light;
      transition: all 0.2s ease-in-out;
      width: max-content;
      max-width: 300px;
    }

    &:hover img {
      box-shadow: 0 0 0 2px #fff, 0 0 0 5px $gray-2;
      }

    &:hover span {
      opacity: 1;
      padding: 8px 15px;
      }
    }

  #photoberry-session-nav-title {
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    gap            : 25px;
    row-gap        : 5px;
    align-items    : center;

    h1 {
      font-family : var(--ps-logo-font-family);
      font-weight : var(--ps-logo-font-weight);
      font-size   : var(--ps-logo-font-size);
      cursor      : default;
      }

    }

  #photoberry-session-selection {
    font-size   : 12px;
    line-height : 20px;

    @media (min-width : 781px) {

      a {
        @include button(secondary, very-small);

        & {
          text-decoration  : none;
          font-weight      : normal;
          padding          : 5px 10px;
          font-family      : inherit;
          margin-left      : 5px;
          background-color : transparent;
          border-color     : $gray-1;
          border-width     : 1px;

          &:hover {
            padding : 5px 10px;
            }

          }

        }
      }
    @media (max-width : 780px) {
      a {
        background-image : url(../img/icons/gray/close.svg);
        @include button(primary, very-small, true);

        & {
          border          : 0;
          background-size : 22px;
          }
        }
      }
    }

  #photoberry-session-nav-actions {

    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    gap            : 6px;
    align-items    : center;
    list-style     : none;
    padding        : 0;
    margin         : 0;

    li > button {

      @include button(secondary, medium, true);

      &, &:hover {
        border-width : 1px;
        }

      }

    li.photoberry-session-action-download  button {
        background-image : url(../img/icons/gray/download.svg);
      }

    li.photoberry-session-action-send  button {
        background-image : url(../img/icons/gray/send.svg);
      }

    li.photoberry-session-action-cart-add  button {
        background-image : url(../img/icons/gray/cart.svg);
      }

    li.photoberry-studio-more {
      @include dropdown();

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

      > ul {
        display : none;
        right   : 0;
        top     : 35px;

        a {
          font-size : var(--ps-font-size-small);
          }
        }

      > button {
        vertical-align   : middle;
        background-image : url(../img/icons/gray/more.svg);
        @include button(secondary, medium, true);

        & {
          border-width : 1px;
          }
        }
      }
    }
  }


// Smaller devices

@media (max-width: 781px) {
  .photoberry-studio-user span {
    display: none;
    }
  }