/*--- TABS ---*/
.tabs-container {
  margin-bottom: 2rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
  
  .tab-button {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-bottom: none;
    padding: 10px 15px;
    margin-right: 5px;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    
    &.active {
      background: #fff;
      font-weight: 600;
    }
    
    &:hover,
    &:focus {
      background: #e9e9e9;
      outline: none;
      color: #333;
    }
    
    &:focus-visible {
      outline: 2px solid #333;
      outline-offset: 1px;
    }
  }
}

.tab-panel {
  display: none;
  
  &.active {
    display: block;
  }
}

@media (max-width: 768px) {
  .tabs {
    flex-direction: column;
    border-bottom: none;
    margin-bottom: 1rem;
    
    .tab-button {
      margin-right: 0;
      margin-bottom: 5px;
      border-radius: 4px;
      border-bottom: 1px solid #ddd;
      
      &.active {
        border-bottom: 1px solid #333;
      }
    }
  }
}


/*--- SELECT ELEMENT ---*/
.custom-select-wrap,
.custom-select-wrap-white {
  position: relative;
  
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 12px;
    background-color: var(--pink);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(-50%) rotate(90deg);
    pointer-events: none;
    transition: var(--transition);
  }
  
  &:hover:after,
  &:focus-within:after {
    background-color: var(--navy);
  }
  
  select {
    width: 100%;
    height: 35px;
    padding: 7px 47px 7px 12px;
    line-height: 19px;
    font-weight: 500;
    color: var(--navy);
    background-color: var(--grey-5);
    border: 1px solid var(--grey-5);
    border-radius: 0;
    appearance: none;
    cursor: pointer;
    outline: none;
    
    &:hover,
    &:focus {
      background-color: var(--grey-25);
      border-color: var(--grey-25);
    }
  }
}


/*--- SELECT ELEMENT (WHITE VARIATION) ---*/
.custom-select-wrap-white {
  &:after {
    background-color: var(--blue);
  }
  
  &:hover:after,
  &:focus-within:after {
    background-color: var(--pink);
  }
  
  select {
    height: 33px;
    padding: 7px 45px 7px 10px;
    line-height: 17px;
    font-size: 14px;
    color: var(--text);
    background-color: var(--white);
    border-color: var(--navy);
    
    &:hover,
    &:focus {
      background-color: var(--white);
      border-color: var(--pink);
    }
  }

  &.custom-select-wrap-white_large {
    &:after {
      right: 12px;
      width: 15px;
      height: 15px;
    }

    select {
      height: 39px;
      padding: 8px 47px 11px 12px;
      line-height: normal;
      font-size: 16px;
    }
  }
}


/*--- TOGGLE SWITCH ---*/
.form-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 180px;

  @media (max-width: 768px) {
    min-width: auto;
    width: 100%;
  }

  .toggle-label {
    font-size: 0.875rem;
    line-height: 1.125rem;
    margin-bottom: 14px;
    font-weight: 400;
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    margin: 0;

    input {
      opacity: 0;
      width: 0;
      height: 0;

      &:checked + .slider {
        background-color: var(--blue);

        &:before {
          transform: translateX(14px);
        }
      }
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--grey-50);
      transition: var(--transition);
      border-radius: 18px;

      &:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 2px;
        bottom: 1.75px;
        background-color: var(--white);
        transition: var(--transition);
        border-radius: 50%;
      }
    }
  }
}