@import "../properties.css";

.resetButton {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-weight: bold;
}

.button {
  composes: resetButton;
  padding: 0 4em;
  text-transform: uppercase;
  font-family: var(--font-family-noto-sans);
  /* z-index: 1; */
  font-weight: var(--typography-text-font-weight-700);
  letter-spacing: 1px;
  white-space: nowrap;
  position: relative;
}

.button:disabled {
  background-color: var(--color-grey-300);
  color: var(--color-grey-500);
  cursor: not-allowed;
  box-shadow: none;
}

.button:hover:disabled {
  background-color: var(--color-grey-300);
  color: var(--color-grey-500);
  cursor: not-allowed;
  box-shadow: none;
}

/* Skin Danger */

.skin-danger {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-danger);
  color: var(--color-white);
}

.skin-danger:hover,
.skin-danger:focus,
.skin-danger-outlined:hover,
.skin-danger-outlined:focus {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-danger-dark);
  color: var(--color-white);
  outline: none;
}

.skin-danger-full {
  composes: skin-danger;
  width: 100%;
}

.skin-danger-outlined {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  border: 2px solid var(--color-danger);
  background-color: transparent;
  color: var(--color-danger);
}

.skin-danger-outlined-full {
  composes: skin-danger-outlined;
  width: 100%;
}

/* Skin Primary */

.skin-primary {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.skin-primary:hover,
.skin-primary:focus,
.skin-primary-outlined:hover,
.skin-primary-outlined:focus {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  outline: none;
}

.skin-primary-full {
  composes: skin-primary;
  width: 100%;
}

.skin-primary-outlined {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  border: 2px solid var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}

.skin-primary-outlined-full {
  composes: skin-primary-outlined;
  width: 100%;
}

/* Skin Default */

.skin-default {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-default);
  color: var(--color-white);
}

.skin-default:hover,
.skin-default:focus,
.skin-default-outlined:hover,
.skin-default-outlined:focus {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-black);
  color: var(--color-white);
  outline: none;
}

.skin-default-full {
  composes: skin-default;
  width: 100%;
}

.skin-default-outlined {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  border: 2px solid var(--color-default);
  background-color: transparent;
  color: var(--color-default);
}

.skin-default-outlined-full {
  composes: skin-default-outlined;
  width: 100%;
}

/* Skin Selector Group */

.skin-selector-group {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-secondary-100);
  color: var(--color-white);
}

.skin-selector-group:hover,
.skin-selector-group:focus,
.skin-selector-group-outlined:hover,
.skin-selector-group-outlined:focus {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  background-color: var(--color-secondary-100-dark);
  color: var(--color-white);
  outline: none;
}

.skin-selector-group-full {
  composes: skin-selector-group;
  width: 100%;
}

.skin-selector-group-outlined {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  border: 2px solid var(--color-secondary-100);
  background-color: transparent;
  color: var(--color-secondary-100);
}

.skin-selector-group-outlined-full {
  composes: skin-selector-group-outlined;
  width: 100%;
}

.skin-accent {
  border-radius: var(--radius-large);
  background-color: var(--color-accent);
  color: var(--color-white);
}

.skin-accent-full {
  composes: skin-accent;
  width: 100%;
}

.skin-primary-green-compact {
  padding: 0 1em;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
}

.skin-white-outlined {
  border: 3px solid #fff;
  background-color: transparent;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

.skin-clean {
  background-color: transparent;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.segmented {
  border-radius: var(--radius-small);
  padding: 8px 22px;
  font-size: 14px;
  font-family: var(--font-family-noto-sans);
  text-transform: initial;
  letter-spacing: initial;
  border: 1px solid var(--color-accent);
}

.skin-segmented {
  composes: segmented;
  border: 1px solid var(--color-default);
  color: 1px solid var(--color-grey-800);
}

.skin-segmented-active {
  composes: segmented;
  font-weight: bold;
  background-color: var(--color-default);
  color: var(--color-white);
}

.skin-segmented-active-accent {
  composes: segmented;
  font-weight: bold;
  color: var(--color-white);
  background-color: var(--color-accent);
}

.skin-fillall {
  position: relative;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.skin-fillall span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  height: 100%;
}

/* list-item with variations */
.skin-list-item {
  background-color: var(--color-grey-100);
  color: var(--color-grey-900);
  border-top: 1px solid var(--color-grey-300);
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  display: block;
  border-radius: 0;
  text-transform: initial;
  letter-spacing: initial;
  width: 100%;
  text-align: left;
  padding-left: 28px;
  padding-right: 28px;
  white-space: normal;
  min-height: 60px;
  height: auto !important;
  font-family: var(--font-family-noto-sans);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skin-list-item .text {
  white-space: normal;
  justify-content: flex-start;
}

.skin-list-item:focus,
.skin-list-item:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.skin-list-item-danger {
  composes: skin-list-item;
  min-height: 40px;
  background-color: var(--color-danger);
  border-top: 0;
  color: var(--color-white);
  padding-right: 8px;
}

.skin-list-item-success {
  composes: skin-list-item;
  min-height: 40px;
  background-color: var(--color-success);
  border-top: 0;
  color: var(--color-white);
  padding-right: 8px;
}

.skin-list-item-info {
  composes: skin-list-item;
  min-height: 40px;
  background-color: var(--color-info);
  border-top: 0;
  color: var(--color-white);
  padding-right: 8px;
}

.skin-list-item-white {
  composes: skin-list-item;
  min-height: 40px;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-400);
  color: var(--color-black);
  padding-right: 8px;
}

/* link */
.skin-link {
  letter-spacing: 1px;
  color: var(--color-info);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  font-family: var(--font-family-noto-sans);
  padding-left: 12px;
  padding-right: 12px;
  height: auto !important;
}

.skin-link:hover,
.skin-link:focus {
  outline: none;
}

.skin-link-white {
  composes: skin-link;
  color: var(--color-white);
}

.skin-none {
  padding: 0;
  border-radius: 0;
  height: auto !important;
  min-width: auto !important;
}

.skin-none:hover,
.skin-none:focus {
  outline: none;
}

.skin-touchable {
  composes: skin-none;
  width: initial;
  min-width: initial;
  text-align: inherit;
  letter-spacing: initial;
  white-space: initial;
  padding: initial;
}

.skin-icon {
  composes: skin-none;
}

.skin-icon .icon svg {
  fill: var(--color-default);
}

/* Icon */
.icon {
  margin-left: 10px;
}

.icon.iconOnly {
  margin-left: 0;
  display: flex;
  justify-content: center;
}

.text {
  justify-content: center;
}

.text,
.icon {
  display: flex;
  align-items: center;
}

.icon svg {
  width: 24px;
  fill: var(--color-white);
}

.skin-icon-primary {
  composes: skin-icon;
  min-width: 38px !important;
  min-height: 38px !important;
  background-color: var(--color-primary);
  color: var(--color-white);
  fill: var(--color-white);
}

.skin-icon-primary:hover,
.skin-icon-primary:focus {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  outline: none;
}

.skin-icon-default {
  composes: skin-icon;
  min-width: 38px !important;
  min-height: 38px !important;
  background-color: var(--color-default);
  color: var(--color-white);
  fill: var(--color-white);
}

.skin-icon-default:hover,
.skin-icon-default:focus {
  background-color: var(--color-black);
  color: var(--color-white);
  outline: none;
}

/* sizes */
.super-small, .sm {
  min-height: 24px;
  border-radius: var(--button-radius-super-small);
  font-size: 12px !important;
  line-height: 18px;
  min-width: 58px;
}

.extra-small, .xs {
  min-height: 32px;
  border-radius: var(--button-radius-extra-small);
  font-size: 14px !important;
  line-height: 21px;
  min-width: 88px;
}

.small, .s {
  min-height: 40px;
  border-radius: var(--button-radius-small);
  font-size: 16px !important;
  line-height: 24px;
  min-width: 132px;
}

.medium, .m {
  height: 48px;
  border-radius: var(--button-radius-medium);
  font-size: 18px !important;
  line-height: 27px;
  min-width: 198px;
}

.large, .l {
  min-height: 56px;
  border-radius: var(--button-radius-large);
  font-size: 20px !important;
  line-height: 30px;
  min-width: 297px;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .button {
    font-size: 14px;
  }
}