@import '../variables';

.itf-segmeneted-control {
  --itf-segmeneted-control--background: #f5f6f8;
  --itf-segmeneted-control--border-radius: #{$border-radius};
  // --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
  --itf-segmeneted-control--shadow: none;
  --itf-segmeneted-control--selection-bg: rgba(26, 74, 151, 0.1);
  --itf-segmeneted-control--text-active: #1A4A97;

  cursor: pointer;
  background: var(--itf-segmeneted-control--background);
  border-radius: $border-radius-lg;
  margin: 0;
  padding: 4px;
  border: none;
  outline: none;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;



  [data-theme="dark"] & {
    --itf-segmeneted-control--background: #{$dark-input-bg};

    .option label {
      color: var(--bs-body-color);
    }
    .selection {
      background: #222;
    }
  }

  &.small .option label {
    padding: 0.125rem 0.25rem;
  }
  .option {
    position: relative;

    &:hover input:not(:checked) + label span,
    &:active input:not(:checked) + label span,
    &:focus input:not(:checked) + label span {
      /*opacity: .2;*/
      color: var(--v-primary-base);
    }
    &:active input:not(:checked) + label span {
      transform: scale(.95);
    }
    &:first-of-type {
      grid-column: 1;
      grid-row: 1;
      box-shadow: none;

      label::before {
        opacity: 0;
      }
      label::after {
        opacity: 0;
      }
    }
    &:last-of-type {
      label::after {
        opacity: 0;
      }
    }
    label {
      justify-content: center;
      height: 100%;
      align-items: center;
      display: flex;
      cursor: pointer;
      position: relative;
      text-align: center;
      padding: .25rem 1.5rem;
      background: rgba(255, 255, 255, 0);
      color: rgba(0, 0, 0, 1);

      &.disabled {
        cursor: not-allowed;
        color: rgba(0, 0, 0, .25);
      }
      &::before,
      &::after {
        content: '';
        width: 1px;
        background: rgba(142, 142, 147, .15);
        position: absolute;
        top: 14%;
        bottom: 14%;
        border-radius: var(--itf-segmeneted-control--border-radius);
        will-change: background;
        -webkit-transition: background .2s ease;
        transition: background .2s ease;
      }
      &::before {
        left: 0;
        transform: translateX(-.5px);
      }
      &::after {
        right: 0;
        transform: translateX(.5px);
      }
      span {
        pointer-events: none;
        display: block;
        position: relative;
        //z-index: 2;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        will-change: transform;
      }
    }

    input {
      //z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      border: none;
      opacity: 0;

      &:checked + label {
        cursor: default;
      }
      &:checked + span {
        color: var(--itf-segmeneted-control--text-active);
      }
      &:checked + label::before,
      &:checked + label::after {
        background: var(--itf-segmeneted-control--background);
        //z-index: 1;
      }
    }
  }
  .selection {
    background: var(--itf-segmeneted-control--selection-bg);
    // border: .5px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--itf-segmeneted-control--shadow);
    /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
    border-radius: var(--itf-segmeneted-control--border-radius);
    grid-column: 1;
    grid-row: 1;
    //z-index: 2;
    will-change: transform;
    -webkit-transition: transform .2s ease;
    transition: transform .2s ease;
  }
}
