@use "./variables" as *;

.#{$component-prefix}fixed-nav {
  position: fixed;
  right: 0;
  z-index: $fixed-nav-z-index;
  display: inline-block;
  height: $fixed-nav-height;

  &_btn {
    position: absolute;
    right: 0;
    z-index: $fixed-nav-z-index;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px * $hd;
    height: 100%;
    background: $fixed-nav-button-background;
    border-radius: 45px * $hd 0 0 45px * $hd;
    box-shadow: 0 2px * $hd 4px * $hd 0 rgba(0, 0, 0, 0.2);

    .#{$component-prefix}fixed-nav_btn-icon {
      margin-right: 5px * $hd;
      line-height: normal;
      transition: all 0.3s;
      transform: rotate(0deg);
      transform-origin: center;
    }

    &-text {
      flex-shrink: 0;
      width: 24px * $hd;
      font-size: $fixed-nav-button-font-size;
      line-height: 13px * $hd;
      color: #fff;
    }
  }

  &_content {
    position: absolute;
    right: 0;
    z-index: $fixed-nav-content-z-index;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    height: 100%;
    padding: 0 80px * $hd 0 20px * $hd;
    background: $fixed-nav-background-color;
    border-radius: 25px * $hd 0 0 25px * $hd;
    box-shadow: 2px * $hd 2px * $hd 8px * $hd 0 rgba(0, 0, 0, 0.2);
    transition: all 0.5s;
    transform: translateX(100%);

    &--item {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      min-width: 50px * $hd;
      height: 100%;
      color: $fixed-nav-color;
    }

    &--img {
      width: 20px * $hd;
      height: 20px * $hd;
      margin-bottom: 2px * $hd;
    }

    &--text {
      font-size: 10px * $hd;
    }
  }

  &--active {
    .#{$component-prefix}fixed-nav_btn-icon {
      transform: rotate(180deg);
    }

    .#{$component-prefix}fixed-nav_content {
      transform: translateX(0%) !important;
    }

    .#{$component-prefix}fixed-nav--left {
      .#{$component-prefix}icon {
        transform: rotate(0deg) !important;
      }
    }
  }

  &--left {
    right: auto;
    left: 0;

    .#{$component-prefix}fixed-nav_btn {
      right: auto;
      left: 0;
      flex-direction: row-reverse;
      border-radius: 0 45px * $hd 45px * $hd 0;
    }

    .#{$component-prefix}fixed-nav_btn-icon {
      margin-left: 5px * $hd;
      transform: rotate(180deg);
    }

    .#{$component-prefix}fixed-nav_content {
      right: auto;
      padding: 0 20px * $hd 0 80px * $hd;
      border-radius: 0 25px * $hd 25px * $hd 0;
      transform: translateX(-100%);
    }
  }
}