@import "./../../style-config/colors";
@import "./../../style-config/mixins";
@import "./../../style-config/z-index";

.carbon-animated-menu-button {
  @include border-radius(100%);
  @include box-shadow(0 5px 8px rgba(0,0,0,0.2));
  background-color: $magenta;
  color: $white;
  display: inline-block;
  position: relative;
  width: 45px;
  height: 45px;
  touch-action: manipulation;

/***** Button Label Styles ****/
  .carbon-animated-menu-button__label {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 15px;
  }

  .icon-add {
    display: inline-block;
    left: 50%;
    margin-left: -7px;
    position: relative;
    top: 14px;

    &::before {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .carbon-link__anchor {
    color: white;
    font-weight: normal;
  }

/******** Expanded Button Styles ****/

  &:hover,
  &.hover {
    background-color: $magenta-dull;
    @include transition(background-color 0.1s 0s);
  }

  .carbon-animated-menu-button-enter {
    opacity: 0;
    transform: scale(0);
  }

  .carbon-animated-menu-button-enter.carbon-animated-menu-button-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: all 200ms ease, opacity 200ms ease 50ms;
  }

  .carbon-animated-menu-button-leave {
    opacity: 1;
  }

  .carbon-animated-menu-button-leave.carbon-animated-menu-button-leave-active  {
    opacity: 0;
    transform: scale(0);
    transition: all 100ms ease, opacity 100ms ease;
  }

  .carbon-animated-menu-button__content {
    @include box-shadow(0 5px 10px 0 rgba(0, 0, 0, 0.2));
    @include border-radius(5px 25px 5px 5px);
    background-color: $magenta-dull;
    display: block;
    padding: 25px 40px 30px;
    position: absolute;
    top: 0;
    z-index: $z-animate-menu-button;

    @at-root {
      /******** Direction Option Styles ***/

      .carbon-animated-menu-button--left#{&} {
        @include transform-origin(top right);
        right: 0;
      }

      .carbon-animated-menu-button--right#{&} {
        @include transform-origin(top left);
        left: 0;
      }

      /******* Size Options ****/

      .carbon-animated-menu-button--extra-small#{&} {
        min-width: 100px;
      }

      .carbon-animated-menu-button--small#{&} {
        min-width: 150px;
      }

      .carbon-animated-menu-button--medium-small#{&} {
        min-width: 400px;
      }

      .carbon-animated-menu-button--medium#{&} {
        min-width: 550px;
      }

      .carbon-animated-menu-button--medium-large#{&} {
        min-width: 700px;
      }

      .carbon-animated-menu-button--large#{&} {
        min-width: 1050px;
      }

      .carbon-animated-menu-button--extra-large#{&} {
        min-width: 1200px;
      }
    }

    .icon-close {
      float: right;
      outline: none;
    }
  }
}