/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@use "../../base/components/button";
@use "../../utilities";

.dremio-button {
  @extend .text-medium;
  @extend .h-4;
  @extend .border;
  @extend .border-solid;
  @extend .rounded;
  border-color: transparent;

  min-width: 100px;

  transition:
    background 75ms ease-in-out,
    color 75ms ease-in-out;

  &__content {
    @extend .gap-05;
    // @extend .px-105;
    padding-inline: 10px;
  }

  &:disabled,
  &[aria-disabled="true"] {
    &:not([aria-busy="true"]) {
      border-color: transparent !important;
      color: var(--text--disabled) !important;
      @extend .bg-disabled;
    }
  }

  &--primary {
    @extend .bg-brand-300;
    &:hover,
    &:focus-visible {
      &:not([aria-busy="true"]) {
        @extend .bg-brand-400;
      }
    }
  }

  &--secondary {
    background: var(--fill--primary);
    border-color: var(--border--neutral--solid);
    color: var(--text--faded);

    &:hover,
    &:focus-visible {
      &:not([aria-busy="true"]) {
        background: var(--fill--secondary);
      }
    }
  }

  &--tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--text--brand);

    &:hover,
    &:focus-visible {
      &:not([aria-busy="true"]) {
        background: var(--fill--primary--hover);
      }
    }

    &:disabled,
    &[aria-disabled="true"] {
      &:not([aria-busy="true"]) {
        background: transparent !important;
      }
    }
  }

  &--primary-danger {
    background: var(--fill--danger--solid);
    border-color: transparent;
    color: white;

    &:hover {
      background: var(--fill--danger--bold);
    }
  }

  &--secondary-danger {
    background: transparent;
    border-color: var(--border--neutral--solid);
    color: var(--fill--danger--solid);

    &:hover {
      background: var(--fill--danger);
      border-color: var(--fill--danger);
    }
  }

  &--tertiary-danger {
    background: transparent;
    border-color: transparent;
    color: var(--fill--danger--solid);

    &:hover,
    &:focus-visible {
      &:not([aria-busy="true"]) {
        background: var(--fill--danger);
      }
    }

    &:disabled,
    &[aria-disabled="true"] {
      &:not([aria-busy="true"]) {
        background: transparent !important;
      }
    }
  }
}

.dremio-light {
  @media (prefers-contrast: more) {
    .dremio-button {
      &--primary {
        background-color: var(--color--brand--500);
        &:hover,
        &:focus-visible {
          &:not([aria-busy="true"]) {
            background-color: var(--color--brand--600);
          }
        }
      }

      &:disabled,
      &[aria-disabled="true"] {
        color: var(--color--neutral--500);
      }
    }
  }
}

.dremio-dark .dremio-button {
  &--primary {
    @extend .bg-brand-200;
    &:hover,
    &:focus-visible {
      &:not([aria-busy="true"]) {
        @extend .bg-brand-150;
      }
    }
  }
}

.dremio-light,
.dremio-dark {
  .bg-brand-500 .dremio-button {
    &--primary {
      @extend .bg-brand-600;
      &:hover {
        @extend .bg-brand-700;
      }
    }

    &--tertiary {
      @extend .bg-none;
      color: inherit;
      &:hover {
        @extend .bg-none;
      }
    }
  }
}
