$frost-color-link-primary-focus-bg: $frost-color-blue-4;
$frost-color-link-primary-pressed-bg: #1e9de5;
$frost-color-link-secondary-pressed-bg: #e7eef3;
$frost-color-link-secondary-border-bottom-color: #fff;
$frost-color-link-secondary-hover-bg-color: rgba($frost-color-blue-1, .05);
$frost-color-link-focus-box-shadow: 0 1px 6px rgba(0, 158, 239, .75);

// info-bar style
$frost-color-link-info-bar-bg: $frost-color-white;
$frost-color-link-info-bar-bg-hover: rgba($frost-color-blue-1, .05);
$frost-color-link-info-bar-focus: 0 1px 6px rgba($frost-color-blue-1, .75);
$frost-color-link-info-bar-active:  rgba($frost-color-blue-1, .1);

// inline style
$frost-color-link-inline-darken-1: darken($frost-color-blue-1, 8);
$frost-color-link-inline-darken-2: darken($frost-color-blue-1, 15);
$frost-color-link-inline-hover-bg: rgba($frost-color-blue-1, .05);

.frost-link {
  display: inline-block;
  border-radius: 2px;
  font-family: $frost-font-family;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  &.disabled {
    border: 0;
    cursor: default;

    &:hover {
      background-color: inherit;
    }
  }

  &:focus,
  &:active {
    outline: none;
  }

  &.hidden {
    visibility: hidden;
  }


  // ----------------------
  // Priority based coloring
  // ----------------------

  // priority = 'primary'
  &.primary {
    border: 0;
    background: linear-gradient(lighten($frost-color-blue-1, 14), $frost-color-blue-1);
    color: $frost-color-white;

    &:hover {
      background: $frost-color-blue-3;
    }

    &:focus {
      border: 2px solid $frost-color-link-primary-focus-bg;
      outline: 0;
      box-shadow: $frost-color-link-focus-box-shadow;

    }

    &:active {
      &:not(.disabled) {
        background: $frost-color-link-primary-pressed-bg;
        box-shadow: none;

        .content {
          opacity: .5;
        }
      }
    }

    &.disabled {
      box-shadow: none;
      opacity: .25;

      &:hover {
        background: linear-gradient(lighten($frost-color-blue-1, 14), $frost-color-blue-1);
      }

      &:focus {
        border: 0;
      }
    }
  }

  // priority = 'secondary'
  &.secondary {
    border: 2px solid $frost-color-blue-1;
    background-color: $frost-color-white;
    color: $frost-color-blue-1;

    .text {
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: $frost-color-link-secondary-border-bottom-color;
    }

    &:hover {
      background-color: $frost-color-link-secondary-hover-bg-color;
      box-shadow: none;

      &:not(.disabled) {
        .text {
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: $frost-color-blue-1;
        }
      }
    }

    &:focus {
      outline: 0;
      box-shadow: $frost-color-link-focus-box-shadow;

      &:not(.disabled) {
        .text {
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: $frost-color-blue-1;
        }
      }
    }

    &:active {
      background: $frost-color-link-secondary-pressed-bg;
      box-shadow: none;

      &:not(.disabled) {
        .content {
          opacity: .5;
        }

        .text {
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: $frost-color-blue-1;
        }
      }
    }

    &.disabled {
      box-shadow: none;
      opacity: .25;

      &:hover {
        background: none;
      }
    }
  }

  // ----------------------
  // Design based coloring
  // ----------------------

  // design = 'inline'
  &.inline {
    margin-bottom: -7px;
    background-color: inherit;

    > .content {
      min-width: inherit;
    }

    .text {
      border-bottom: 1px solid $frost-color-blue-1;
      color: $frost-color-blue-1;
    }

    &:hover {
      &:not(.disabled) {
        background-color: $frost-color-link-inline-hover-bg;
        box-shadow: none;

        .text {
          border-bottom: 1px solid $frost-color-link-inline-darken-1;
          color: $frost-color-link-inline-darken-1;
        }
      }
    }

    &:focus {
      &:not(.disabled) {
        outline: 0;
        box-shadow: $frost-color-link-info-bar-focus;

        .text {
          border-bottom: 1px solid $frost-color-link-inline-darken-1;
          color: $frost-color-link-inline-darken-1;
        }
      }
    }

    &:active {
      &:not(.disabled) {
        background-color: $frost-color-link-info-bar-active;
        color: $frost-color-blue-1;
        box-shadow: none;
        opacity: .7;

        .text {
          border-bottom: 1px solid $frost-color-link-inline-darken-2;
          color: $frost-color-link-inline-darken-2;
          box-shadow: none;
        }
      }
    }

    &.disabled {
      background: none;
      box-shadow: none;
      opacity: .3;
    }
  }

  // design = 'info-bar'
  &.info-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75px;
    height: 75px;
    background-color: $frost-color-link-info-bar-bg;
    color: $frost-color-blue-1;

    .frost-icon  {
      width: 30px;
      height: 30px;
      margin-left: -10px;
      padding-bottom: 0;
    }

    .text {
      display: inline-block;
      margin-top: -5px;
      padding: 5px 1px 2px;
      color: $frost-color-blue-1;
      font-size: $frost-font-s;
      line-height: 1;
    }

    > .content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      box-sizing: border-box;

      .text {
        padding: 0 1px 2px;
        text-align: center;
        vertical-align: middle;
      }

      .svg {
        margin-bottom: 10px;

        .frost-icon {
          vertical-align: middle;
        }
      }
    }

    &:hover {
      &:not(.disabled) {
        background-color: $frost-color-link-info-bar-bg-hover;
        box-shadow: none;

        .text {
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }

    &:focus {
      &:not(.disabled) {
        outline: 0;
        box-shadow: $frost-color-link-info-bar-focus;

        .text {
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }

    &:active {
      &:not(.disabled) {
        background-color: $frost-color-link-info-bar-active;
        color: $frost-color-blue-1;
        box-shadow: none;
        opacity: .7;

        .text {
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }

    &.disabled {
      box-shadow: none;
      opacity: .25;

      &:hover {
        background: none;
      }
    }
  }

  // ----------------------
  // Sizes
  // ----------------------

  // size = 'large'
  &.large {
    height: 50px;
    padding: 0 20px;
    font-size: $frost-font-l;

    .frost-icon {
      width: 40px;
      height: 40px;
    }
  }

  // size = 'medium'
  &.medium {
    height: 40px;
    padding: 0 20px;
    font-size: $frost-font-m;

    .frost-icon {
      width: 30px;
      height: 30px;
    }
  }

  // size = 'small'
  &.small {
    height: 30px;
    padding: 0 10px;
    font-size: $frost-font-s;

    .frost-icon {
      width: 20px;
      height: 20px;
    }
  }

  > .content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 100%;
    box-sizing: border-box;

    .text {
      padding: 0 1px 2px;
      text-align: center;
      vertical-align: middle;
    }

    .svg {
      margin-left: 10px;

      .frost-icon {
        vertical-align: middle;
      }
    }
  }
}