@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((tabs))} {
  display: flex;

  .hd {
    display: flex;
    background-color: #{getValName((tabs, nav-background-color))};
    box-shadow: 0 -1px 0 0 #{getValName((tabs, border-color))} inset;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .bd {
    flex: 1;
  }

  #{getClassName((tabs, other))} {
    padding: var(--os-space-s) var(--os-space-base);
  }

  #{getClassName((tabs, nav))} {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    width: 100%;
    overflow: auto;

    li {
      margin: 0;
      list-style: none;
      padding: var(--os-space-s) var(--os-space-base);
      border-color: transparent;
      border-style: solid;
      border-width: 1px;
      cursor: pointer;
      color: #{getValName((tabs, nav-color))};
      position: relative;
      white-space: nowrap;

      >div {
        transition: all .5s;
        display: inline-block;
        transform: translate3d(0, 0, 0);
      }

      >i {
        pointer-events: none;
        opacity: 0;
        transform: translate3d(-2px, 0, 0);
        transition: all .5s;
        position: absolute;
        right: var(--os-space-xs);
      }

      &.is-disabled {
        opacity: .5;
        pointer-events: none;
      }

      &.is-active {
        color: #{getValName((tabs, nav-active-color))};
      }

      +li {
        margin: 0
      }
    }

    &#{getClassName((tabs, nav, closable))} {
      li {

        &:hover {
          >i {
            pointer-events: auto;
            opacity: 1;
            transform: translate3d(0, 0, 0);
          }

          >div {
            transform: translate3d(-6px, 0, 0);
          }
        }
      }
    }
  }

  &#{getClassName((tabs, position, top))} {
    .hd {
      box-shadow: 0 -1px 0 0 #{getValName((tabs, border-color))} inset;
    }
  }

  &#{getClassName((tabs, position, bottom))} {
    .hd {
      box-shadow: 0 1px 0 0 #{getValName((tabs, border-color))} inset;
    }
  }

  &#{getClassName((tabs, position, left))} {
    .hd {
      box-shadow: -1px 0 0 0 #{getValName((tabs, border-color))} inset;
    }
  }

  &#{getClassName((tabs, position, right))} {
    .hd {
      box-shadow: 1px 0 0 0 #{getValName((tabs, border-color))} inset;
    }
  }

  #{getClassName((tabs, group))} {
    padding: var(--os-space-base);
  }
}

#{getClassName((tabs, position, left))},
#{getClassName((tabs, position, right))} {
  .hd {
    flex-direction: column;
  }

  #{getClassName((tabs, nav))} {
    flex-direction: column;
  }

  .hd {
    align-items: flex-start;
  }
}

#{getClassName((tabs, position, top))} {
  flex-direction: column;
}

#{getClassName((tabs, position, bottom))} {
  flex-direction: column-reverse;
}

#{getClassName((tabs, position, left))} {
  flex-direction: row;

  #{getClassName((tabs, nav))} {
    align-items: flex-end;
  }

}

#{getClassName((tabs, position, right))} {
  flex-direction: row-reverse;

  #{getClassName((tabs, nav))} {
    align-items: flex-start;
  }
}

#{getClassName((tabs, type, normal))} {

  &#{getClassName((tabs, position, top))} {
    li {
      &.is-active {
        border-bottom-color: currentColor;
      }
    }
  }

  &#{getClassName((tabs, position, bottom))} {
    li {
      &.is-active {
        border-top-color: currentColor;
      }
    }
  }

  &#{getClassName((tabs, position, left))} {
    li {
      &.is-active {
        border-right-color: currentColor;
      }
    }
  }

  &#{getClassName((tabs, position, right))} {
    li {
      &.is-active {
        border-left-color: currentColor;
      }
    }
  }
}

#{getClassName((tabs, type, border-card))} {


  border: solid 1px #{getValName((tabs, border-color))};
  border-radius: #{getValName((tabs, border-radius))};

  #{getClassName((tabs, nav))} {
    li {
      &.is-active {
        background-color: #{getValName((tabs, background-color))};
      }
    }
  }

  #{getClassName((tabs, group))} {
    background-color: #{getValName((tabs, background-color))};
    border-radius: 0 0 #{getValName((tabs, border-radius))} #{getValName((tabs, border-radius))};
  }


  &#{getClassName((tabs, position, top))} {

    li {
      border-left: solid 1px #{getValName((tabs, border-color))};

      &:first-of-type {
        border-left: solid 1px transparent;
        border-radius: #{getValName((tabs, border-radius))} 0 0 0;
      }

      &:last-of-type {
        border-right: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }

  &#{getClassName((tabs, position, bottom))} {
    li {
      border-left: solid 1px #{getValName((tabs, border-color))};

      &:first-of-type {
        border-left: solid 1px transparent;
        border-radius: 0 #{getValName((tabs, border-radius))} 0 0 0;
      }

      &:last-of-type {
        border-right: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }

  &#{getClassName((tabs, position, left))} {
    #{getClassName((tabs, nav))} {
      height: 100%;
    }

    li {
      text-align: right;
      width: 100%;
      border-top: solid 1px #{getValName((tabs, border-color))};

      &:first-of-type {
        border-top: solid 1px transparent;
        border-radius: 0 #{getValName((tabs, border-radius))} 0 0 0;
      }

      &:last-of-type {
        border-bottom: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }

  &#{getClassName((tabs, position, right))} {
    #{getClassName((tabs, nav))} {
      height: 100%;
    }

    li {
      width: 100%;
      border-top: solid 1px #{getValName((tabs, border-color))};

      &:first-of-type {
        border-top: solid 1px transparent;
        border-radius: 0 #{getValName((tabs, border-radius))} 0 0;
      }

      &:last-of-type {
        border-bottom: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }
}

#{getClassName((tabs, type, card))} {

  #{getClassName((tabs, nav))} {
    li {
      &.is-active {
        background-color: #{getValName((tabs, background-color))};
      }
    }
  }

  #{getClassName((tabs, group))} {
    background-color: #{getValName((tabs, background-color))};
  }


  &#{getClassName((tabs, position, top))} {

    li {
      border-top: solid 1px #{getValName((tabs, border-color))};
      border-left: solid 1px #{getValName((tabs, border-color))};

      &:first-of-type {
        border-radius: #{getValName((tabs, border-radius))} 0 0 0;
      }

      &:last-of-type {
        border-radius: 0 #{getValName((tabs, border-radius))} 0 0;
        border-right: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }

  &#{getClassName((tabs, position, bottom))} {
    li {
      border-bottom: solid 1px #{getValName((tabs, border-color))};
      border-left: solid 1px #{getValName((tabs, border-color))};

      &:first-of-type {
        border-radius: 0 0 0 #{getValName((tabs, border-radius))};
      }

      &:last-of-type {
        border-radius: 0 0 #{getValName((tabs, border-radius))} 0;
        border-right: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }

  &#{getClassName((tabs, position, left))} {
    li {
      width: 100%;
      border-top: solid 1px #{getValName((tabs, border-color))};
      border-left: solid 1px #{getValName((tabs, border-color))};
      text-align: right;

      &:first-of-type {
        border-radius: #{getValName((tabs, border-radius))} 0 0 0;
      }

      &:last-of-type {
        border-radius: 0 0 0 #{getValName((tabs, border-radius))};
        border-bottom: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }

  &#{getClassName((tabs, position, right))} {
    li {
      width: 100%;
      border-top: solid 1px #{getValName((tabs, border-color))};
      border-right: solid 1px #{getValName((tabs, border-color))};
      text-align: right;

      &:first-of-type {
        border-radius: 0 #{getValName((tabs, border-radius))} 0 0;
      }

      &:last-of-type {
        border-radius: 0 0 #{getValName((tabs, border-radius))} 0;
        border-bottom: solid 1px #{getValName((tabs, border-color))};
      }
    }
  }
}

#{getClassName((tabs))} {
  #{joinValName((tabs, nav-background-color))}: transparent;
  #{joinValName((tabs, background-color))}: transparent;
  @include set-css-val(tabs,
    ('nav-color': (color, neutral, 6),
      'nav-active-color': (color, primary),
      'border-color': (color, neutral, 2),
      'border-radius': (border, radius, base),
    ))
}

#{getClassName((tabs, type, card))} {
  @include set-css-val(tabs,
    ('background-color': (color, neutral, 0),
    ))
}

#{getClassName((tabs, type, border-card))} {
  @include set-css-val(tabs,
    ('background-color': (color, neutral, 0),
      'nav-background-color': (color, neutral, 1),
    ))
}