MyCrypto/common/components/WalletDecrypt/components/WalletButton.scss

@import 'common/sass/variables';
@import 'common/sass/mixins';

@keyframes wallet-button-enter {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.WalletButton {
  position: relative;
  flex: 1;
  height: 155px;
  max-width: 230px;
  min-width: 200px;
  padding: 25px 15px;
  margin: 0 $space-md $space;

  background: color(control-bg);
  box-shadow: 0 1px 4px rgba(#000, 0.2);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  animation: wallet-button-enter 400ms ease 1;
  animation-fill-mode: backwards;

  @for $i from 0 to 5 {
    &:nth-child(#{$i}) {
      animation-delay: 100ms + ($i * 60ms);
    }
  }

  &:not(.is-disabled) {
    &:hover,
    &:focus {
      transform: translateY(-2px);
      z-index: 2;
      box-shadow: 0 1px 4px rgba(#000, 0.12), 0 4px 6px rgba(#000, 0.12);

      .WalletButton-title {
        color: color(brand-primary);

        &-icon {
          opacity: 1;
        }
      }
    }

    &:active {
      transform: translateY(-1px);
      box-shadow: 0 1px 2px rgba(#000, 0.2), 0 3px 4px rgba(#000, 0.2);
    }
  }

  &.is-disabled {
    cursor: not-allowed;
    @include show-tooltip-on-hover;

    .WalletButton-inner {
      opacity: 0.3;
    }
  }

  &-inner {
    transition: opacity 200ms ease;
  }

  &-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: $font-size-medium;
    margin-bottom: $space * 1.25;
    transition: color 150ms ease;

    &-icon {
      margin-right: 8px;
      max-height: 26px;
      opacity: 0.8;

      @include theme(dark) {
        opacity: 1;
        filter: invert(1);

        // Kind of hacky, but we don't want to invert metamask
        &[src*="metamask"] {
          filter: none;
        }
      }
    }
  }

  &-description {
    color: shade-dark(0.65);
    font-size: $font-size-small;
    font-weight: lighter;
  }

  &-example {
    font-size: $font-size-xs;
    color: color(brand-danger-light);
    @include ellipsis;
  }

  &-icons {
    position: absolute;
    bottom: 5px;
    right: 5px;

    &-icon {
      position: relative;
      margin-left: 8px;
      @include show-tooltip-on-hover;

      .fa {
        position: relative;
        opacity: 0.6;
        font-size: $font-size-medium;

        &:hover {
          opacity: 0.9;
        }

        &-shield {
          color: color(brand-primary);
        }

        &-exclamation-triangle {
          color: color(brand-warning);
        }

        &-question-circle,
        &-eye {
          color: shade-dark(0.5);
        }

        &-question-circle:hover {
          color: color(brand-primary);
        }
      }
    }
  }

  &--small {
    height: 105px;
    max-width: 180px;
    min-width: 160px;
    margin: 0 $space-sm $space-md;
    padding: 20px 15px;

    .WalletButton {
      &-title {
        font-size: $font-size-bump;
        margin-bottom: $space-sm;
      }

      &-icons {
        &-icon {
          margin-left: 6px;

          .fa {
            font-size: $font-size-bump;
          }
        }
      }
    }
  }

  // Mobile handling
  @media screen and (max-width: $screen-xs) {
    padding: 16px;

    &,
    &--small {
      height: auto;
      width: 100%;
      min-width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
    }

    &-title {
      justify-content: flex-start;
      margin: 0;
    }

    &-description,
    &-example {
      display: none;
    }

    &-icons {
      top: 0;
      right: 0;
      bottom: 0;

      &-icon {
        float: left;
        display: block;
        height: 100%;
        margin: 0;
        width: 48px;
        text-align: center;
        border-left: 1px solid rgba(0, 0, 0, 0.1);

        a {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .fa {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    &--small {
      padding: 12px;

      .WalletButton-title {
        margin: 0;
      }

      .WalletButton-icons {
        &-icon {
          margin: 0;
        }
      }
    }
  }
}