@import '../../globals/scss/colors';
@import '../../globals/scss/vars';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/layer';
@import '../../globals/scss/import-once';

@include exports('fab') {
  .#{$prefix}--fab {
    @include reset;
    @include rotate(0, $transition--base);
    display: inline-block;
    width: rem(72px);
    height: rem(72px);
    text-decoration: none;
    filter: drop-shadow(0px 3px 3px 0 $box-shadow);

    &__hidden {
      @include hidden;
      color: $color__white;
    }

    // Styles for "Open" state
    &__svg {
      width: 100%;

      .#{$prefix}--fab__hexagon {
        transition: fill $transition--base;
        fill: $color__blue-40;
      }

      .#{$prefix}--fab__plus-icon {
        @include rotate(0, $transition--base);
        fill: $color__white;
      }
    }

    // Styles for "Closed" state
    &[data-state='closed'] {
      @include rotate(90deg, $transition--base);

      .#{$prefix}--fab__hexagon {
        transition: fill $transition--base;
        fill: $color__navy-gray-5;
      }

      .#{$prefix}--fab__plus-icon {
        @include rotate(-45deg, $transition--base);
      }
    }
  }
}