@import 'main';

$accordion_width: 272px;
$accordion_icon_size: 24px;

.accordion {
  width: $accordion_width;

  .item {
    display: block;
    border-bottom: 1px solid $color_light;
    @include transition;

    .title {
      padding: 8px 32px 8px 0;

      cursor: default;

      &-content {
        @include transition;
      }

      .icons-box {
        position: absolute;
        top: 8px;
        right: 0;
        cursor: pointer;

        .icon {
          font-size: $accordion_icon_size;
          @include transition;

          &.hover-icon {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
          }
        }

        &:hover {
          .static-icon {
            visibility: hidden;
          }

          .hover-icon {
            visibility: visible;
            opacity: 1;
          }
        }
      }


      &:hover {
        .title-content {
          color: $color_primary;
        }
      }
    }

    .content {
      visibility: hidden;
      position: absolute;
      max-height: 0;
      overflow: hidden;
      color: $color_comet;
      padding: 8px 0;
      @include transition(1s, ease-in-out, max-height);
    }

    &.active {
      border-bottom-color: transparent;

      .icon {
        color: $color_primary;

        &.static-icon {
          visibility: visible !important;
        }

        &.hover-icon {
          display: none;
        }
      }

      .content {
        visibility: visible;
        position: relative;
        max-height: 1000px;
      }
    }
  }
}