@import "./../../../css/master/settings/variables/colors";
@import '~@od/global-resources/scss/settings/variables/colors';
.od-my-office-toolbar{
  $activeZindex: 999;
  $size: 258px;
  font-weight: normal;
  &, & * {
    box-sizing: border-box;
  }

  &-container{
    position: relative;
    border-radius: 0;
    display: none;
    width: $size;
    margin-left: 20px;
    height: 34px;
    @media only screen and (min-width: 1258px){
      display: inline-block;
    }
  }

  &-overlay{
    display: none;
  }

  &-loading{
    padding: 2rem 1rem;
    text-align: center;
    &:before,
    &:after{
      width: 100%;
      display: table;
      content: " ";
      clear: both;
    }
    .spinner:after{
      width: 20px;
      height: 20px;
      left: calc(50%);
      border-width: 2px;
    }
  }

  &-btn{
    position: relative;
    color: $white;
    line-height: 32px;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    display: block;
    width: 100%;
    background-color: $gray;
    border: 1px solid $gray;
    &:hover,
    &:focus{
      color: white !important;
    }
    .arrow{
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      position: relative;
      width: 10px;
      height: 20px;
      transition: 200ms ease-in-out;
      transform: rotateZ(-180deg);
      &:before{
        content: "\25BE";
        transition: transform .4s ease-in-out;
        width: 10px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    }
  }

  &-dropdown{
    position: absolute;
    right: -2px;
    width: $size;
    display: none;
    border: 1px solid $gray-medium;
    background-color: $white;
    top: calc(100% + 1px);
    z-index: $activeZindex;
    #myOfficeToolbar{
      width: 100%;
      display: block !important;
      box-shadow: none;
      border: 0;
      margin: 0;
    }
  }

  /* Active Dropdown */
  &-active{
    &:before{
        position: fixed;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: $black;
        z-index: $activeZindex - 1;
        opacity: 0.45;
        visibility: visible;
    }
    #header{
      position: relative;
      z-index: $activeZindex + 1;
    }
    #headerWrapper{
      position: relative;
      z-index: $activeZindex;
    }
  }

  &-active &-container{
    position: relative;
    z-index: $activeZindex;
  }

  &-active &-btn{
    z-index: $activeZindex;
    .arrow{
      transform: rotateZ(0deg);
    }
  }

  &-active &-dropdown {
    display: block;
  }

}

.smallbiz {
  .od-my-office-toolbar{
    &-btn {
      background-color: $teal;
      border: 1px solid $teal;
    }
  }
}