@use "/styles/all" as *;
@use "./fonts.css" as *;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: $background;
}

html {
  font-family: var(--font-Roboto);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background-color: unset;
  border: unset;
  outline: none;
}

// antd global styles

.ant-input-outlined:hover {
  border-color: $orange500 !important;
  outline: none !important;
  box-shadow: unset !important;
}

.ant-select-outlined:hover .ant-select-selector {
  border-color: $orange500 !important;
}

.ant-select-outlined:focus-within .ant-select-selector {
  border-color: $orange500 !important;
}

.ant-input-outlined:focus-within {
  border-color: $orange500 !important;
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: $orange500 !important;
}

.ant-checkbox-checked {
  .ant-checkbox-inner {
    background-color: $orange500 !important;
    border: 1px solid $orange500 !important;
  }
}

.ant-btn:hover {
  border-color: $orange500 !important;
}

.ant-picker {
  visibility: hidden !important;
}

.ant-picker-dropdown {
  ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block: 22px !important;
    li {
      font-size: 14px;
      font-weight: 500;
      color: $grey900;
    }
  }
}

.ant-picker-range-arrow {
  display: none !important;
}

.ant-picker-cell-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;
}

.ant-picker-cell-range-start {
  &::before {
    width: 20px;
    height: 40px !important;
    background-color: $grey50 !important;
  }

  .ant-picker-cell-inner {
    background-color: $orange500 !important;
    border-radius: 99px !important;

    &::before {
      border: unset !important;
    }
  }
}

.ant-picker-cell-range-end {
  &::before {
    width: 20px;
    height: 40px !important;
    background-color: $grey50 !important;
  }

  .ant-picker-cell-inner {
    background-color: $orange500 !important;
    border-radius: 99px !important;

    &::before {
      border: unset !important;
    }
  }
}

.ant-picker-cell-in-range::before {
  height: 40px !important;
  background-color: $grey50 !important;
}

.ant-picker-cell-inner::before {
  border: none !important;
}

.ant-radio-wrapper:hover .ant-radio-inner {
  border-color: $orange500 !important;
}

.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  background-color: $orange500 !important;
  border-color: $orange500 !important;
}

// Bootstrap
:root {
  /* Common spacing variables */
  --gap-small: 8px;
  --gap-medium: 16px;
  --gap-large: 32px;
  --justify-center: center;
  --justify-space-between: space-between;
  --align-center: center;
}
/* Flex container - default */
.flex {
  display: flex;
}

/* Row container */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* Column container */
.flex-column {
  display: flex;
  flex-direction: column;
}

/* Center alignment for Y axis */
.flex-align-center {
  display: flex;
  align-items: var(--align-center);
}

/* Center alignment for both axis */
.flex-center {
  display: flex;
  align-items: var(--align-center);
  justify-content: var(--justify-center);
}

/* Space-between alignment */
.flex-space-between {
  display: flex;
  align-items: var(--align-center);
  justify-content: var(--justify-space-between);
}

/* Gap utilities */
.flex-gap-small {
  gap: var(--gap-small);
}

.flex-gap-medium {
  gap: var(--gap-medium);
}

.flex-gap-large {
  gap: var(--gap-large);
}

/* Wrap */
.flex-wrap {
  flex-wrap: wrap;
}

/* No wrap */
.flex-no-wrap {
  flex-wrap: nowrap;
}

/* Align items - start */
.flex-align-start {
  align-items: flex-start;
}

/* Align items - end */
.flex-align-end {
  align-items: flex-end;
}

/* Justify content - start */
.flex-justify-start {
  justify-content: flex-start;
}

/* Justify content - end */
.flex-justify-end {
  justify-content: flex-end;
}

/* flex grow 1 */
.flex-grow-1 {
  flex-grow: 1;
  .ant-checkbox-inner:after {
    background-color: unset !important;
  }

  .ant-radio-checked .ant-radio-inner {
    background-color: $orange500 !important;
    border-color: $orange500 !important;
  }
  .ant-radio-wrapper:hover .ant-radio-inner {
    border-color: $orange500 !important;
  }
}

// antd tabs
.ant-tabs .ant-tabs-ink-bar {
  display: none !important;
}
.ant-tabs-tab {
  margin: 0 !important;
}

.ant-tabs-tab-btn {
  padding: 10px;
  font-family: "GothamMedium";
  font-size: 14px;
  border: 1px solid $grey200;
}

.ant-tabs-nav-list .ant-tabs-tab:first-of-type .ant-tabs-tab-btn {
  border-radius: 10px 0 0 10px;
}
.merchantTab .ant-tabs-nav-list div:nth-child(5) .ant-tabs-tab-btn {
  border-radius: 0 10px 10px 0 !important;
}
.twoTabs .ant-tabs-nav-list div:nth-child(2) .ant-tabs-tab-btn {
  border-radius: 0 10px 10px 0 !important;
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: $background !important;
  background-color: $orange500;
  border-color: $orange500;
}