@import "../../../assets/scss/variables";
:root {
  --active-year-color:#1A73E8;
  --active-year-border:#F3F8FC;
}
:root[data-theme="dark"] {
  --active-year-color:#CCCCCC;
  --active-year-border:#CCCCCC;
}
.year-navigator {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  position: relative;

  //&:before{
  //  position: absolute;
  //  content: '';
  //  width: 40px;
  //  left: -4px;
  //  height: 52px;
  //  background: transparent;
  //}

  &:after {
    position: absolute;
    content: "";
    width: calc(100% - 30px);
    background: $title-color;
    height: 1px;
    top: 44px;
    left: 15px;
  }

  .year {
    position: relative;
    color: $title-color;
    font-weight: bold;
    font-size: 1.4rem;
    cursor: pointer;

    &:after {
      position: absolute;
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: $title-color;
      left: 50%;
      transform: translateX(-50%);
      top: 41px;
      transition: all 0.5s ;
    }

    &:before {
      opacity: 0;
      position: absolute;
      content: '';
      width: 1px;
      height: 15px;
      background: $title-color;
      top: 30px;
      left: calc(50%);
      transform: translateX(-50%);
      transition: all 0.5s;

      &:after{
        content: '';
      }

    }

    &.active {
      color: var(--active-year-color);
      cursor: unset;

      &:after {
        position: absolute;
        content: '';
        width: 32px;
        height: 32px;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        top: 28px;
        background: url("../../../assets/images/pencil.svg") white;
        background-position: center;
        z-index: 1;
        border: 3px solid var(--active-year-border);
        cursor: pointer;

      }

      &.isLocked {
        &:after{
          background: url("../../../assets/images/padlock.svg") white;
          background-position: center;
          background-repeat: no-repeat;
          //filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(125deg) brightness(103%) contrast(103%);
        }

      }
    }

    &:not(.active) {
      &:before {
        opacity: 1;

      }
    }
  }

}