@type: 'extra';
@element: 'custom';

@import (multiple, reference, optional) '../../theme.config';

@grey-light: #f1f0f5;
@grey-dark: #e1e1e1;
@blue: #004b80;
@teal: #007b6a;
@sand: #b78b02;
@light-blue: #50afa3;
@purple: #9e85b6;
@blue-grey: #6889a6;
@border-color: #3d5265;
@text-color: #212d39;

.rast-map-block {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2em;

  &:not(.landing) {
    .step-0:not(.active) g path:nth-of-type(1) {
      fill: #0c3330;
    }

    .step-1:not(.active) g path:nth-of-type(1) {
      fill: #031624;
    }

    .step-2:not(.active) g path:nth-of-type(1) {
      fill: #081936;
    }

    .step-3:not(.active) g path:nth-of-type(1) {
      fill: #262c4e;
    }

    .step-4:not(.active) g path:nth-of-type(1) {
      fill: #534022;
    }

    .step-5:not(.active) g path:nth-of-type(1) {
      fill: #39531f;
    }

    .step-link {
      path:nth-of-type(2),
      path:nth-of-type(3) {
        fill: #929eaf;
      }
    }
  }

  .step-link {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: 0.3s all;
  }

  .step-0.step-link:hover g path:nth-of-type(1),
  .step-0.step-link.active g path:nth-of-type(1) {
    fill: #155246;
  }

  .step-1.step-link:hover g path:nth-of-type(1),
  .step-1.step-link.active g path:nth-of-type(1) {
    fill: #062435;
  }

  .step-2.step-link:hover g path:nth-of-type(1),
  .step-2.step-link.active g path:nth-of-type(1) {
    fill: #0d284f;
  }

  .step-3.step-link:hover g path:nth-of-type(1),
  .step-3.step-link.active g path:nth-of-type(1) {
    fill: #434772;
  }

  .step-4.step-link:hover g path:nth-of-type(1),
  .step-4.step-link.active g path:nth-of-type(1) {
    fill: #926830;
  }

  .step-5.step-link:hover g path:nth-of-type(1),
  .step-5.step-link.active g path:nth-of-type(1) {
    fill: #64862c;
  }

  .step-link:hover,
  .step-link.active {
    transform: scale(1.3, 1.3);

    path:nth-of-type(2),
    path:nth-of-type(3) {
      fill: #fff;
    }

    .step-link .item.active a {
      font-weight: bold;
    }

    .ui.accordion .active.content {
      padding: 1rem 1rem !important;
    }

    .substep a {
      color: inherit;
    }

    .substep:not(:last-child) {
      padding-bottom: 0.8em;
    }
  }
}

.rast-block {
  .ui.accordion {
    margin-bottom: 0.7em;
    color: @text-color;

    &:has(svg) {
      .title:not(.ui) {
        padding: 0.3rem 0.5rem 0.3rem 0;
      }
    }

    .title {
      justify-content: flex-start;
      border: none;
      background-color: @grey-light;

      &.active {
        background-color: @grey-dark;
      }

      .item-title {
        color: @text-color;
        font-size: 15px;
      }

      > .icon {
        order: unset;
      }
    }

    .content {
      padding: 1rem;
      background-color: @grey-light;

      &.active {
        border: 2px solid @grey-dark;
      }

      .item {
        a {
          color: @text-color;
          font-size: 14px;
        }

        &:not(:last-child) {
          padding-bottom: 0.8em;
          border-bottom: 1px solid @border-color;
        }

        &:not(:first-child) {
          padding-top: 0.8em;
        }
      }

      .substep.active {
        a {
          color: @text-color;
          font-weight: bold;
        }
      }
    }

    .cls-1 {
      stroke: @text-color;
      stroke-width: 3;
    }

    &.step-1,
    &.step-2,
    &.step-3,
    &.step-4,
    &.step-5,
    &.step-6 {
      .title.active {
        .item-title {
          color: @white;
        }

        .icon {
          fill: @white !important;
        }

        .cls-1 {
          stroke: @white;
          stroke-width: 3;
        }
      }
    }

    &.step-1 {
      .title.active {
        background-color: @teal;
      }

      .content {
        border: 2px solid @teal;
      }
    }

    &.step-2 {
      .title.active {
        background-color: @blue;
      }

      .content {
        border: 2px solid @blue;
      }
    }

    &.step-3 {
      .title.active {
        background-color: @blue-grey;
      }

      .content {
        border: 2px solid @blue-grey;
      }
    }

    &.step-4 {
      .title.active {
        background-color: @purple;
      }

      .content {
        border: 2px solid @purple;
      }
    }

    &.step-5 {
      .title.active {
        background-color: @sand;
      }

      .content {
        border: 2px solid @sand;
      }
    }

    &.step-6 {
      .title.active {
        background-color: @light-blue;
      }

      .content {
        border: 2px solid @light-blue;
      }
    }
  }
}