/**
 * SASS shared across applet
 */

body,
body button {
	font-family: $v-font-family;
}

.assertive {
  color: $v-assertive-color !important;
}

.left {
  float: left;
}

.right {
  float: right;
}

 .smaller {
  font-size: smaller;
 }

h4 {
  font-size: 20px;
}

/* Header bar */

.bar-coinbase {
  background-color: $v-primary-color;
  border: none;
  color: $v-white-color;
	background-size: 0;
}

.back-button {
  color: $v-white-color !important;
}

/* View */

ion-content {
  background: $v-hint-gray;
}

/* Buttons */

button {
  &.button-primary {
    background: $v-button-primary-bg;
    color: $v-button-primary-color !important;

    &.activated {
      border: none;
      background: adjust-color($v-button-primary-bg, $saturation: -20, $lightness: -20);
      color: adjust-color($v-button-primary-color, $lightness: -50) !important;
    }
  }

  &.button-secondary {
    background: $v-button-secondary-bg;
    color: $v-button-secondary-color !important;

    &.activated {
      border: none;
      background: adjust-color($v-button-secondary-bg, $saturation: -20, $lightness: -20);
      color: adjust-color($v-button-secondary-color, $lightness: -50) !important;
    }
  }

  &.button-clear {
    background: transparent;
    color: $v-white-color !important;
  }
}

/* List item */

svg {
  width: 30px !important;
}

// Allows svg tag to appear as an img tag in an item.
.item-icon-left svg,
.item-icon-right svg {
  position: absolute;
  top: 0;
  left: 15px !important;
  display: flex;
  height: 100%;
  align-items: center;
 }

.item {
  color: $v-text-color;

  &:not(.item-divider) {
    min-height: 65px;
  }

  &.item-divider {
    border-top: none;
  }

 	&.item-icon-left {
  	padding-left: 62px;
 	}

  h2 {
    color: $v-text-color;
    padding-top: 1px;
    font-family: $v-font-family;
    font-weight: 500;
  }

  &:not(.has-detail) {
    >h2,
    >span:not(.item-note) >h2 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
 	}

  &.has-detail {
    padding-top: 18px;
    
    >p,
    >span:not(.item-note) >p {
      color: $v-mid-gray;
      font-size: 14px;
      font-weight: 500;
      padding-top: 2px;
    }
  }

 	>.item-note {
    position: absolute;
    top: 30px;
    right: 16px;
  	text-align: right;
    line-height: 22px;
		color: $v-dark-gray;

    &.two-lines {
      top: 18px;
    }
 	}

  &.item-icon-right {
    padding-right: 50px;
    
    >.item-note {
      right: 48px;
    }  
  }

  &.append {
    border-top: none;
  }

  &.info,
  &.info >h2,
  &.info >p {
    word-wrap: break-word;
    white-space: normal;
    background: $v-hint-gray;
    color: $v-primary-color;
    padding-right: 16px;
  }
}

.ion-ios-arrow-right:before {
	content: "\f125";
	font-family: Ionicons;
	font-size: 20px;
	color: $v-subtle-gray;
}