@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

.fb-anim-open :global {
  -webkit-animation-name: anim-open;
  animation-name: anim-open;
  -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.fb-anim-close :global {
  -webkit-animation-name: anim-close;
  animation-name: anim-close;
}

.feature-content {
  position: relative;

  &:focus-visible {
    @include focus(
      $outline-offset: -3px,
      $outline-width: 2px,
      $box-shadow: none,
    );
  }

  .feature {
    @include partial-row-center-start;

    .text {
      height: inherit;
      padding-right: 5px;
    }
  }

  .coll,
  .exp {
    .icon {
      @include partial-column-center;
      height: 10px;
      line-height: normal;
      width: 10px;

      svg {
        height: 100%;

        path {
          fill: $featurebar_item_icon;
        }
      }
    }
  }

  .groupcoll {
    padding-left: 10px;
    background-color: $featurebar_group_bg;
  }

  &.header {
    &:only-child {
      width: 100%;
    }

    .feature {
      height: 24px;
      color: $featurebar_features_fg;
      font-size: $font_size_button;
      line-height: 24px;
      padding-left: 5px;
      cursor: default;

      &.groupexp:first-child {
        .text {
          cursor: pointer;
          width: 100%;
        }
      }

      &.exp:first-child {
        &:not(.selected) {
          .text {
            cursor: pointer;
            width: 100%;
          }
        }
      }

      &.groupexp {
        &:hover {
          .text {
            text-decoration: underline;
          }
        }
      }
    }

    &:last-child {
      .feature {
        .icon {
          display: none;
        }
      }
    }

    &:hover {
      .feature {
        &.selected {
          .text {
            color: $featurebar_text_hover_fg;
          }
        }

        &:not(.selected) {
          .text {
            text-decoration: underline;
            color: $featurebar_text_hover_fg;
          }

          &.exp {
            .icon {
              path {
                fill: $featurebar_text_hover_fg;
              }
            }
          }
        }
      }
    }
  }

  &.item {
    width: 100%;
    border-bottom: $featurebar_features_border;

    .feature {
      width: 100%;
      height: 32px;
      color: $featurebar_features_fg;
      font-size: $font_size_button;
      line-height: 32px;
      cursor: pointer;

      .check-open,
      .check-close {
        @include partial-column-center;
        position: relative;
        left: 0;
        top: 0;
        width: 32px;
        height: 32px;

        // RS=>RS TID: 47112 powoduje to problemy na Edge
        /*animation-duration: 0.4s;
          -webkit-animation-duration: 0.4s;
          animation-fill-mode: forwards;
          -webkit-animation-fill-mode: forwards;*/
        svg {
          width: 16px;
          height: 100%;
        }

        &.anim-open {
          @extend .fb-anim-open;
        }

        &.anim-close {
          @extend .fb-anim-close;
        }
      }

      .check-open {
        svg {
          path {
            fill: $featurebar_item_icon;
          }
        }
      }

      .check-close {
        svg {
          path {
            fill: $featurebar_item_icon;
          }
        }
      }

      &:hover {
        background-color: $featurebar_item_hover_bg;

        .text {
          color: $featurebar_text_hover_fg;
        }

        &.coll,
        &.exp,
        &.check-close {
          svg {
            path {
              fill: $featurebar_item_hover_icon;
            }
          }
        }
      }
    }
  }
}