/*!
 * 
  * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

@import "../variables";
@import "../mixins";
@import "../variables/buttons_vars";

.dlt-button {
  // @include component-vars(buttons); //Mixin to define all the root variables
  color: $buttons-color-text-primary;
  text-decoration: none;
  padding: $buttons-padding-y $buttons-padding-x;
  font-family: $buttons-font-family;
  font-size: $buttons-font-size;
  font-weight: $buttons-font-weight;
  line-height: $buttons-line-height;
  @include transition($buttons-time-transition $buttons-transition-effect);
  cursor: pointer;
  border-radius: $buttons-border-radii;
  border: $buttons-border-width $buttons-border-style transparent;
  outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
  outline-offset: $buttons-outline-offset;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/* Primary Buttons with states -- Start --*/

.dlt-button-primary {
  color: $buttons-color-text-inverse;
  background-color: $buttons-color-primary;

  &:hover:not(:active):enabled,
  &:focus {
    color: $buttons-color-text-primary;
    background-color: $buttons-color-primary-hover;
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
    outline-offset: $buttons-outline-offset;
  }

  &:focus{
    background-color: $buttons-color-primary-focus;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

  &:active {
    background-color: $buttons-color-primary-active;
    border-color: $buttons-color-primary-active;
    outline: none;
    color: $buttons-color-text-inverse;
  }
}

/* Primary Buttons with states -- End -- */

/* Secondary Buttons with states -- Start --  */

.dlt-button-secondary {
  background-color: $buttons-color-secondary;
  border-color: $buttons-color-primary;

  &:hover:not(:disabled),
  &:focus {
    background-color: $buttons-color-secondary;
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
    outline-offset: $buttons-outline-offset;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

  &:active {
    color: $buttons-color-text-primary !important;
    background-color: $buttons-color-secondary-active !important;
    border-color: $buttons-color-primary !important;
  }
}

/* Secondary Buttons with states -- End --  */

/* Secondary White Buttons with states -- Start --  */

.dlt-button-secondary-white {
  background-color: transparent;
  border-color: $buttons-color-text-inverse;
  color: $buttons-color-text-inverse;

  &:hover:not(:disabled),
  &:focus {
    border: $buttons-border-width $buttons-border-style $buttons-color-text-inverse;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-text-inverse;
    outline-offset: $buttons-outline-offset;
    color: $buttons-color-text-inverse;
    text-decoration: none;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

  &:active {
    color: $buttons-color-text-inverse !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
}

/* Secondary White Buttons with states -- End --  */

/* Tertiary Buttons with states -- Start --  */

.dlt-button-tertiary {
  background-color: transparent;
  border-color: transparent;
  color: $buttons-color-text-primary;

  &:hover:not(:disabled),
  &:focus {
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
    outline-offset: $buttons-outline-offset;
    color: $buttons-color-text-primary;
    text-decoration: none;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

  &:active {
    color: $buttons-color-text-primary !important;
    background-color: $buttons-color-secondary-active !important;
    border-color: $buttons-color-primary !important;
  }
}

.dlt-button-tertiary-dark {
  background-color: transparent;
  border-color: transparent;
  color: $buttons-color-text-dark;

  &:hover:not(:disabled),
  &:focus {
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
    outline-offset: $buttons-outline-offset;
    color: $buttons-color-text-dark;
    text-decoration: none;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

  &:active {
    color: $buttons-color-text-dark !important;
    background-color: $buttons-color-secondary-active !important;
    border-color: $buttons-color-primary !important;
  }
}

.dlt-button-tertiary-inverse {
  background-color: transparent;
  border-color: transparent;
  color: $buttons-color-text-inverse;

  &:hover:not(:disabled),
  &:focus {
    border: $buttons-border-width $buttons-border-style $buttons-color-text-inverse;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-text-inverse;
    outline-offset: $buttons-outline-offset;
    color: $buttons-color-text-inverse;
    text-decoration: none;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

  &:active {
    color: $buttons-color-text-inverse !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
}

/* Secondary White Buttons with states -- End --  */

/* Emphasis Buttons with states -- Start --  */

.dlt-button-emphasis {
  color: $buttons-color-text-inverse;
  border: $buttons-border-width-hover $buttons-border-style $buttons-color-accent;
  background: $buttons-color-accent;
  border-radius: $buttons-border-accent-radii;
  line-height: $buttons-accent-line-height;
  outline: none;

  &:hover:not(:focus):enabled,
  &:focus {
    border: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-accent;
    color: $buttons-color-accent;
    background: $buttons-color-accent-hover;
    outline: none;
  }

  &:focus{
    background-color: $buttons-color-accent-focus;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
    color: $buttons-color-text-inverse;
  }

  &:active {
    color: $buttons-color-text-inverse !important;
    background-color: $buttons-color-accent-active !important;
    border-color: $buttons-color-accent-active !important;
    outline: none;
  }
}

/* Emphasis Buttons with states -- End --*/

/* Button sizing -- Start --*/
.lg-button {
  line-height: $buttons-line-height-lg;
  padding: $buttons-padding-y $buttons-padding-x-lg;
}

.sm-button {
  line-height: $buttons-line-height-sm;
  font-size: $buttons-font-size-sm;
  padding: $buttons-padding-y $buttons-padding-x-sm;
}

.lg-button-group {
  .dlt-button {
    line-height: $buttons-line-height-lg;
    padding: $buttons-padding-y $buttons-padding-x-lg;
  }
}

.sm-button-group {
  .dlt-button {
    line-height: $buttons-line-height-sm;
    font-size: $buttons-font-size-sm;
    padding: $buttons-padding-y $buttons-padding-x-sm;
  }
}

.lg-emphasis-button {
  line-height: $buttons-accent-line-height-lg;
  padding: $buttons-padding-y $buttons-padding-x-lg;
}

.sm-emphasis-button {
  line-height: $buttons-accent-line-height-sm;
  font-size: $buttons-font-size-sm;
  padding: $buttons-padding-y $buttons-padding-x-sm;
}

/*Button sizing -- End --*/

/* Icon Sizes --Start--*/
.dlt-icon-lg {
  font-size: $buttons-icon-size-lg;
  float: left;
  margin-right: $buttons-icon-margin-right-lg;
}

.dlt-icon-md {
  font-size: $buttons-icon-size;
  float: left;
  margin-right: $buttons-icon-margin-right;
}

.dlt-icon-sm {
  font-size: $buttons-icon-size-sm;
  float: left;
  margin-right: $buttons-icon-margin-right-sm;
}

/*Icon sizes --End--*/

/* Icon Button --Start--*/
.dlt-button-icon {
  background-color: transparent;
  padding: 0;
  font-size: $buttons-icon-size-lg;
  margin: 0;
  justify-content: center;
  height: $buttons-icon-height;
  width: $buttons-icon-width;
  cursor: pointer;
  @include transition($buttons-time-transition $buttons-transition-effect);

  &:not(.btn-selected):not(:active):hover:enabled,
  &:focus {
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    @include box-shadow(inset 0px 0px 0px 1px $buttons-color-primary);
    outline: none;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    color: $buttons-color-text-primary;
    cursor: not-allowed;
  }

  &:active:enabled {
    color: $buttons-color-text-primary;
    background-color: $buttons-color-secondary-active;
    border-color: $buttons-color-primary;
    outline: none;
    @include box-shadow(inset 0px 0px 0px 1px $buttons-color-primary);
  }

  .dlt-icon {
    // font-size: $buttons-icon-size-lg;
  }

  &.dlt-button-primary{
    color: $buttons-color-text-inverse;
    background-color: $buttons-color-primary;

    &:hover:not(:active):enabled,
    &:focus {
      color: $buttons-color-text-primary;
      background-color: $buttons-color-primary-hover;
      border: $buttons-border-width $buttons-border-style $buttons-color-primary;
      outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
      outline-offset: $buttons-outline-offset;
    }

    &:focus{
      background-color: $buttons-color-primary-focus;
    }

    &:disabled {
      opacity: $buttons-opacity-disabled;
      cursor: not-allowed;
    }

    &:active {
      background-color: $buttons-color-primary-active;
      border-color: $buttons-color-primary-active;
      outline: none;
      color: $buttons-color-text-inverse;
      box-shadow:none;
    }
  }

  &.lg-icon-button{
    font-size: $buttons-icon-size-lg;
    width: $buttons-icon-width-lg;
    height: $buttons-icon-height-lg;
  }

  &.sm-icon-button{
    font-size: $buttons-icon-size-sm;
    width: $buttons-icon-width-sm;
    height: $buttons-icon-height-sm;
  }
}

/*Icon Button -- End --*/

/*Toggle Buttons --Start--*/
.dlt-button-group {
  height: auto;
  width: auto;

  &:after {
    content: "";
    clear: both;
    display: table;
  }

  .dlt-button-icon {
    //Only for toggle icon buttons group
    background-color: transparent;
    padding: 0;
    margin: 0;
    height: $buttons-icon-height;
    width: $buttons-icon-width;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    @include transition($buttons-time-transition $buttons-transition-effect);

    &:not(.btn-selected):not(:last-child):not(:active):hover:enabled {
      border-right: none;
      @include box-shadow(inset 0px 0px 0px 1px $buttons-color-primary);
      outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
    }
  }

  .dlt-button-toggle {
    background-color: $buttons-color-secondary;
    float: left;
    /* Float the buttons side by side */
    color: $buttons-color-text-primary;
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
    border-radius: 0;

    &:not(:last-child) {
      border-right: none;
      /* Prevent double borders */
    }

    &:first-child{
      border-radius: $buttons-border-radii 0 0 $buttons-border-radii;
    }

    &:last-child{
      border-radius: 0 $buttons-border-radii $buttons-border-radii 0;
    }

    &:not(.btn-selected):hover:enabled,
    &:focus:enabled {
      @include box-shadow(inset 0px 0px 0px 1px $buttons-color-primary);
      outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
    }

    &:not(.btn-selected):active:enabled {
      background-color: $buttons-color-secondary-active;
      color: $buttons-color-text-primary;
      outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
    }

    &:disabled {
      opacity: $buttons-opacity-disabled;
      cursor: not-allowed;
    }

    &.btn-selected {
      background-color: $buttons-color-primary;
      color: $buttons-color-text-inverse;

      &:active {
        background-color: $buttons-color-primary-active;
        color: $buttons-color-text-inverse;
        @include box-shadow(inset 0px 0px 0px 1px $buttons-color-primary-active);
      }
    }
  }
}

.lg-button-group {
  .dlt-button-icon {
    height: $buttons-icon-height-lg;
    width: $buttons-icon-width-lg;
  }
}

.sm-button-group {
  .dlt-button-icon {
    height: $buttons-icon-height-sm;
    width: $buttons-icon-height-sm;

    .dlt-icon {
      font-size: $buttons-icon-size-sm;
    }
  }
}

/*Toggle Buttons -- End --*/

/* Delite Primary Dropdown -- Start --*/
.lg-dropdown {
  .dlt-button {
    height: $buttons-dropdown-height-lg;
    padding: $buttons-dropdown-padding-lg;
  }
}

.sm-dropdown {
  .dlt-button {
    height: $buttons-dropdown-height-sm;
    font-size: $buttons-dropdown-font-size-sm;
    padding: $buttons-dropdown-padding-sm;
  }

  .dropdown-content {
    font-size: $buttons-dropdown-font-size-sm;

    a {
      line-height: $buttons-dropdown-content-line-height-sm;
      padding:0 6px;
    }
  }

  .dlt-dropdown-icon{
    margin-left: 0;
  }

}

.dlt-dropdown {
  display: inline-block;
  position: relative;
}

.dlt-dropdown-icon {
  font-size: $buttons-dropdown-icon-size;
  margin-left: $buttons-dropdown-icon-margin-left;
  margin-top: $buttons-dropdown-icon-margin-top;
}

.dlt-dropdown-primary {
  // display: inline-block;
  padding: $buttons-dropdown-padding;
  color: $buttons-color-text-inverse;
  background-color: $buttons-color-primary;
  border-color: $buttons-color-primary;
  cursor: pointer;
  white-space: nowrap;
  outline: $buttons-border-width-hover $buttons-border-style-hover transparent;

  &:enabled:hover,
  &:focus {
    background-color: $buttons-color-secondary;
    color: $buttons-color-text-primary;
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
    outline-offset: $buttons-outline-offset;
  }

  &:focus{
    background-color: $buttons-color-primary-focus;
  }
  
  &:active {
    color: $buttons-color-text-inverse !important;
    background-color: $buttons-color-primary-active !important;
    outline: $buttons-border-width-hover $buttons-border-style-hover transparent !important;
    border-color: $buttons-color-primary-active !important;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

}

/* Delite Primary Dropdowns -- End -- */

/* Delite Secondary Dropdowns --Start-- */

.dlt-dropdown-secondary {
  padding: $buttons-dropdown-padding;
  color: $buttons-color-text-primary;
  background-color: $buttons-color-secondary;
  border-color: $buttons-color-primary;
  cursor: pointer;
  white-space: nowrap;
  outline: $buttons-border-width-hover $buttons-border-style-hover transparent;

  &:enabled:hover,
  &:focus {
    border: $buttons-border-width $buttons-border-style $buttons-color-primary;
    outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
    outline-offset: $buttons-outline-offset;
  }

  &:active {
    color: $buttons-color-text-primary;
    background-color: $buttons-color-secondary-active;
    outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
  }

  &:disabled {
    opacity: $buttons-opacity-disabled;
    cursor: not-allowed;
  }

}

/* Delite Secondary Dropdowns --End--*/

/* Dropdown Content --Start--*/

.dropdown-content {
  position: absolute;
  display: none;
  width: 100%;
  padding: $buttons-dropdown-content-parent-padding;
  margin: 0;
  font-family: $buttons-font-family;
  font-size: $buttons-font-size;
  color: $buttons-color-text;
  background: $buttons-color-background-static-primary;
  @include box-shadow($buttons-dropdown-elevation);
  list-style-type: none;
  z-index: $buttons-dropdown-z-index;

  .dlt-open & {
    display: block;
  }

  & a {
    text-decoration: none;
    padding: $buttons-dropdown-content-padding;
    color: $buttons-color-text;
    border: $buttons-border-width-hover $buttons-border-style transparent;
    display: block;
    cursor: pointer;
    line-height: $buttons-dropdown-content-line-height;

    &:not(.disabled):hover,
    &:not(.disabled):focus {
      background-color: $buttons-color-secondary;
      color: $buttons-color-text;
      border: $buttons-border-width-hover $buttons-border-style $buttons-color-primary;
      outline: none;
      text-decoration: none;
    }

    &:not(.disabled):active,
    &:not(.disabled):first-child:active {
      background-color: $buttons-color-secondary-active;
      color: $buttons-color-text-primary;
      border: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
      box-shadow: none;
    }

    &.disabled,
    &.disabled:focus {
      text-decoration: none;
      opacity: $buttons-opacity-disabled;
      cursor: not-allowed;
      outline: none;
    }
  }
}

/* Dropdown Content --End-- */

/* Button Styles - End */