@import '../constants/dimensions';
@import '../constants/colors';

.themes {
  padding-top: @padding-lg;

  .themes__row {
    display: flex;
    flex-direction: row;
    margin-bottom: @padding-lg;
  }

  .themes__theme {
    text-align: center;

    h2 {
      margin-top: 0;
      margin-bottom: @padding-xs;
      font-size: @font-size-md !important;
    }

    svg {
      .bg-fill {
        fill: var(--color-bg);
      }

      .success-fill {
        fill: var(--color-success);
      }

      .notice-fill {
        fill: var(--color-notice);
      }

      .warning-fill {
        fill: var(--color-warning);
      }

      .danger-fill {
        fill: var(--color-danger);
      }

      .surprise-fill {
        fill: var(--color-surprise);
      }

      .info-fill {
        fill: var(--color-info);
      }

      .fg-fill {
        fill: var(--color-fg);
      }

      .hl-stroke {
        stroke: var(--hl-md);
      }
    }
  }

  button {
    position: relative;
    margin: @padding-md @padding-md;
    font-size: 0;
    border-radius: @radius-md;
    overflow: hidden;
    box-shadow: 0 0 0 1px @hl-sm;

    &.active {
      box-shadow: 0 0 0 @padding-xs var(--color-surprise);
    }

    &.active,
    &:hover {
      transform: scale(1.05);
    }

    &:active {
      transition: all 50ms ease-out;
    }

    &::after {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      position: absolute;
      font-size: @font-size-md;
      text-transform: uppercase;
      color: @hl-xl;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      visibility: hidden;
    }
  }
}
