@use 'sass:map';
@use '../../global/scss/tools' as nsw;

/* stylelint-disable string-quotes */
/* stylelint-disable sh-waqar/declaration-use-variable */

.nsw-button {
  border-radius: var(--nsw-border-radius);
  font-weight: var(--nsw-font-bold);
  border: solid 2px transparent;
  white-space: normal;
  text-decoration: none;
  padding: nsw.rem(10px) nsw.rem(22px);
  cursor: pointer;
  -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
  appearance: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  display: inline-block;

  @include nsw.font-size('sm');

  &:not(.nsw-button--flex) {
    min-width: nsw.rem(124px);
  }

  &:hover {
    outline: none;
  }

  &:focus {
    @include nsw.nsw-focus;
  }

  &:disabled,
  &.disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .nsw-material-icons {
    font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 24));
    line-height: nsw.rem(10px);
    position: relative;
    bottom: nsw.rem(-7px);

    &:first-child {
      margin-right: nsw.rem(8px);
    }

    &:last-child {
      margin-left: nsw.rem(8px);
    }

    &:only-child {
      margin: 0;
    }
  }

  &--small {
    padding: nsw.rem(5px);
    
    @include nsw.font-size('xs');

    .nsw-material-icons {
      font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 20));

      &:first-child {
        margin-right: nsw.rem(4px);
      }

      &:last-child {
        margin-left: nsw.rem(4px);
      }

      &:only-child {
        margin: 0;
      }    
    }
  }

  &--flex {
    display: flex;
    justify-content: center;
    align-items: center;

    .nsw-material-icons {
      position: static;
    }
  }

  &--full-width {
    display: block;
    width: 100%;

    @include nsw.breakpoint(nsw.$nsw-desktop-breakpoint) {
      display: inline-block;
      width: auto;
    }
  }
}

.nsw-button {
  @each $color, $property-map in nsw.$nsw-buttons {
    &--#{"" + $color} {
      color: map.get($property-map, text-color);
      background-color: map.get($property-map, background);
      border-color: map.get($property-map, border);

      &:visited {
        color: map.get($property-map, text-color);
      }

      &:focus {
        outline-color: map.get($property-map, focus);
      }

      &:hover {
        color: map.get($property-map, text-color-hover);
        background-color: map.get($property-map, background-hover);
        border-color: map.get($property-map, border-hover);
        @if map.get($property-map, hover) == white {
          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.15), rgba(var(--nsw-white-rgb), 0.15));
        }
        @if map.get($property-map, hover) == black {
          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.07), rgba(var(--nsw-black-rgb), 0.07));
        }

        .nsw-material-icons {
          color: map.get($property-map, text-color-hover);
        }
      }

      &:active {
        color: map.get($property-map, text-color-hover);
        background-color: map.get($property-map, background-hover);
        border-color: map.get($property-map, border-hover);
        @if map.get($property-map, hover) == white {
          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.075), rgba(var(--nsw-white-rgb), 0.075));
        }
        @if map.get($property-map, hover) == black {
          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.035), rgba(var(--nsw-black-rgb), 0.035));
        }

        .nsw-material-icons {
          color: map.get($property-map, text-color-hover);
        }
      }

      &:disabled,
      &.disabled {
        color: map.get($property-map, text-color);
        background-color: map.get($property-map, background);
        border-color: map.get($property-map, border);
      }

      .nsw-material-icons {
        color: map.get($property-map, text-color);
      }
    }
  }
}

.nsw-section--invert .nsw-button {
  @each $color, $property-map in nsw.$nsw-buttons {
    &--#{"" + $color} {
      color: map.get($property-map, text-color-invert);
      background-color: map.get($property-map, background-invert);
      border-color: map.get($property-map, border-invert);

      &:visited {
        color: map.get($property-map, text-color-invert);
      }

      &:focus {
        outline-color: map.get($property-map, focus-invert);
      }

      &:hover {
        color: map.get($property-map, text-color-hover-invert);
        background-color: map.get($property-map, background-hover-invert);
        border-color: map.get($property-map, border-hover-invert);
        @if map.get($property-map, hover-invert) == white {
          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.15), rgba(var(--nsw-white-rgb), 0.15));
        }
        @if map.get($property-map, hover-invert) == black {
          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.07), rgba(var(--nsw-black-rgb), 0.07));
        }

        .nsw-material-icons {
          color: map.get($property-map, text-color-hover-invert);
        }
      }

      &:active {
        color: map.get($property-map, text-color-hover-invert);
        background-color: map.get($property-map, background-hover-invert);
        border-color: map.get($property-map, border-hover-invert);
        @if map.get($property-map, hover) == white {
          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.075), rgba(var(--nsw-white-rgb), 0.075));
        }
        @if map.get($property-map, hover) == black {
          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.035), rgba(var(--nsw-black-rgb), 0.035));
        }

        .nsw-material-icons {
          color: map.get($property-map, text-color-hover-invert);
        }
      }

      &:disabled,
      &.disabled {
        color: map.get($property-map, text-color-invert);
        background-color: map.get($property-map, background-invert);
        border-color: map.get($property-map, border-invert);
      }

      .nsw-material-icons {
        color: map.get($property-map, text-color-invert);
      }
    }
  }
}

.nsw-section--invert.nsw-section--brand-supplementary {
  .nsw-button--light {
    color: var(--nsw-section-bg);
    background-color: var(--nsw-white);

    .nsw-material-icons { 
      color: var(--nsw-section-bg);
    }

    &:hover {
      color: var(--nsw-section-bg);
      background-color: var(--nsw-brand-light);

      a,
      span,
      button {
        color: var(--nsw-section-bg);
      }
    }
  }

  .nsw-button--light-outline {
    color: var(--nsw-white);
    border-color: var(--nsw-white);

    span {
      color: var(--nsw-white);
    }

    .nsw-material-icons { 
      color: var(--nsw-white);
    }
    
    &:hover {
      color: var(--nsw-section-bg);
      background-color: var(--nsw-white);

      span,
      button {
        color: var(--nsw-section-bg);
      }
    }
  }
}

.nsw-dialog .nsw-button {
  @each $color, $property-map in nsw.$nsw-buttons {
    &--#{"" + $color} {
      color: map.get($property-map, text-color);
      background-color: map.get($property-map, background);
      border-color: map.get($property-map, border);

      &:visited {
        color: map.get($property-map, text-color);
      }

      &:focus {
        outline-color: map.get($property-map, focus);
      }

      &:hover {
        color: map.get($property-map, text-color-hover);
        background-color: map.get($property-map, background-hover);
        border-color: map.get($property-map, border-hover);
        @if map.get($property-map, hover) == white {
          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.15), rgba(var(--nsw-white-rgb), 0.15));
        }
        @if map.get($property-map, hover) == black {
          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.07), rgba(var(--nsw-black-rgb), 0.07));
        }

        .nsw-material-icons {
          color: map.get($property-map, text-color-hover);
        }
      }

      &:active {
        color: map.get($property-map, text-color-hover);
        background-color: map.get($property-map, background-hover);
        border-color: map.get($property-map, border-hover);
        @if map.get($property-map, hover) == white {
          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.075), rgba(var(--nsw-white-rgb), 0.075));
        }
        @if map.get($property-map, hover) == black {
          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.035), rgba(var(--nsw-black-rgb), 0.035));
        }

        .nsw-material-icons {
          color: map.get($property-map, text-color-hover);
        }
      }

      &:disabled,
      &.disabled {
        color: map.get($property-map, text-color);
        background-color: map.get($property-map, background);
        border-color: map.get($property-map, border);
      }

      .nsw-material-icons {
        color: map.get($property-map, text-color);
      }
    }
  }
}