.user-settings-button {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease-in-out 0s;

  &:hover {
    background: #fff;
  }

  .selected-state {
    display: inline-block;
    vertical-align: top;
    width: 72px;
    height: 29px;
    padding: 7px 8px;

    > span:last-child {
      margin-right: 0;
    }
  }

  .dropdown-triangle {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 29px;
    border-left: 1px solid #e5e5e5;
    background: center center url('data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%224%22%20viewBox%3D%220%200%206%204%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.063%204l3-4H0l3.063%204z%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E') no-repeat;
  }
}

.country-flag {
  display: inline-block;
  width: 21px;
  height: 15px;
  vertical-align: sub;
  margin-right: 8px;
}

.currency-symbols {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #09A5C6;
  width: 26px;
  height: 15px;
  line-height: 14px;
  background: #0BB8DC;
  border-radius: 2px;
  font-size: 11px;
  color: #FFFFFF;
  text-align: center;
  margin-right: 5px;
}

.user-settings {
  position: fixed;
  z-index: 101;
  width: 586px;
  height: 274px;
  top: calc(50% - 137px);
  left: calc(50% - 293px);
  border-radius: 3px;
  background: #fff;
  transform: translateY(20px);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 200ms ease-in-out, transform 200ms ease-in-out;

  &.open {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  }

  .tabs {
    background: #F1F1F1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    .tab {
      display: inline-block;
      vertical-align: top;
      min-width: 112px;
      max-width: 135px;
      height: 66px;

      &.hidden {display: none;}

      &:first-child {
        border-top-left-radius: 3px;
      }

      .name {
        display: block;
        font-family: $semibold;
        font-size: 12px;
        color: #000000;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 15px;
        margin: 16px 19px 0;
      }

      .current {
        display: block;
        opacity: 0.4;
        font-size: 13px;
        color: #000000;
        line-height: 17px;
        margin: 0 18px 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &.active {
        background: #fff;

        .name {
          color: #0BB8DC;
        }
      }

      &:hover {
        .name {
          color: #0BB8DC;
        }
      }
    }
  }

  .actions {
    position: absolute;
    top: 14px;
    right: 4px;

    .save,
    .cancel {
      display: inline-block;
      background: #F1F1F1;
      border: 1px solid rgba(0, 0, 0, 0.10);
      height: 36px;
      padding: 0 20px;
      border-radius: 3px;
      font-family: $semibold;
      font-size: 13px;
      color: #3D3D3D;
      line-height: 16px;
      margin-right: 10px;
      cursor: pointer;
    }

    .save {
      background: #0BB8DC;
      border: none;
      color: #fff;
      &:hover {
        background: #00ACD0;
      }
    }

    .cancel {
      &:hover {
        background: #fff;
      }
    }
  }

  .content {
    .panel {
      display: none;
      white-space: nowrap;

      &.active {
        display: block;
      }

      .column {
        display: inline-block;
        vertical-align: top;
        min-width: 140px;
        margin: 10px;
      }

      .column > .option {
        position: relative;
        display: block;
        line-height: 30px;
        padding: 0 8px;
        font-size: 13px;
        color: #000000;

        &:hover {
          color: #0BB8DC;
        }

        &.selected {
          &:hover {
            color: #000000;
            cursor: default;
          }
        }
      }
    }
  }
}

// Transition only for open state.
.user-settings.open {
  $user-settings-transition: cubic-bezier(0.215, 0.61, 0.355, 1);

  .tab .name {
    transition: color 0.4s $user-settings-transition 0s;
  }

  .actions > button {
    transition: background 0.4s $user-settings-transition 0s;
  }

  // Bottom border for options with transition effects.
  .content .panel .column > .option {
    transition: all 0.4s $user-settings-transition 0s;

    &:before {
      display: block;
      position: absolute;
      z-index: -1;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      content: '';
      background: #f1f1f1;
      transition: all 0.4s $user-settings-transition 0s;
    }

    &:hover:before {
      background: #B1EBF7;
    }

    &.selected:before {
      background: #B1EBF7;
      bottom: 0;
      height: calc(100% + 1px);
    }
  }
}

.user-settings-overflow {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #006479;
  visibility: hidden;
  opacity: 0;
  transition: visibility 200ms, opacity 200ms ease-in-out;

  &.open {
    visibility: visible;
    opacity: .88;
  }
}