/**
 * CUSTOM CSS FOR CAMPAIGN PAGES
 *
 * @todo move this
 */

@import "../base/vars";
@import "../base/mixins";

// WYSIWYG Styles Dropdown.
span.tieto-silver {
  color: #969696;
}

span.parade-blue {
  color: #67afe1;
}

span.parade-orange {
  color: #e57c1c;
}

span.tieto-white {
  color: #fff;
}

h3.tieto-lead {
  @include campaign-lead;
}

/* field_paragraph_class */
#page-tieto .paragraph.tieto-silver,
.field--name-field-paragraph-class option[value="tieto-silver"] {
  background-color: #969696;
}
#page-tieto .paragraph.parade-blue,
.field--name-field-paragraph-class option[value="parade-blue"] {
  background-color: #67afe1;
}
#page-tieto .paragraph.parade-orange,
.field--name-field-paragraph-class option[value="parade-orange"] {
  background-color: #e57c1c;
}
#page-tieto .paragraph.tieto-white,
.field--name-field-paragraph-class option[value="tieto-white"] {
  background-color: #fff;
}

/* parade_title_class */
#page-tieto .paragraph .field--name-parade-title.tieto-silver,
.field--name-parade-title-class option[value="tieto-silver"] {
  color: #969696;
}
#page-tieto .paragraph .field--name-parade-title.parade-blue,
.field--name-parade-title-class option[value="parade-blue"] {
  color: #67afe1;
}
#page-tieto .paragraph .field--name-parade-title.parade-orange,
.field--name-parade-title-class option[value="parade-orange"] {
  color: #e57c1c;
}
#page-tieto .paragraph .field--name-parade-title.tieto-white,
.field--name-parade-title-class option[value="tieto-white"] {
  color: #fff;
}

//             __ _
//    ____    / _(_)
//   / __ \  | |_ ___  ___ __ ___   ___
//  / / _` | |  _| \ \/ / '_ ` _ \ / _ \
// | | (_| | | | | |>  <| | | | | |  __/
//  \ \__,_| |_| |_/_/\_\_| |_| |_|\___|
//   \____/

//                  _          _    __                       _   _      _          _                    _ _ _
//                 (_)        | |  / _|                     | | (_)    | |        | |                  | | | |
//   ___ ___  _ __  _  ___  __| | | |_ _ __ ___  _ __ ___   | |_ _  ___| |_ ___   | |__   __ _ ___  ___| | | |
//  / __/ _ \| '_ \| |/ _ \/ _` | |  _| '__/ _ \| '_ ` _ \  | __| |/ _ \ __/ _ \  | '_ \ / _` / __|/ _ \ | | |
// | (_| (_) | |_) | |  __/ (_| | | | | | | (_) | | | | | | | |_| |  __/ || (_) | | |_) | (_| \__ \  __/_|_|_|
//  \___\___/| .__/|_|\___|\__,_| |_| |_|  \___/|_| |_| |_|  \__|_|\___|\__\___/  |_.__/ \__,_|___/\___(_|_|_)
//           | |
//           |_|
.button {
  display: inline-block;
  font-weight: bold;
  font-family: sans-serif;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 0.25rem 1rem;
  font-size: 1rem;
  border-radius: 2px;
  transition: all 0.2s ease-in-out;
  color: #5e5e5e;
  background-color: #eeeeee;
  border-color: #999999;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.button:focus, .button:active:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.button:focus, .button:hover {
  text-decoration: none;
}

.button:active {
  background-image: none;
  outline: 0;
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.button:hover {
  color: #5e5e5e;
  background-color: #d5d5d5;
  border-color: #7a7a7a;
}

.button:focus {
  color: #5e5e5e;
  background-color: #d5d5d5;
  border-color: #7a7a7a;
}

.button:active {
  color: #5e5e5e;
  background-color: #d5d5d5;
  border-color: #7a7a7a;
  background-image: none;
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.button:active:hover, .button:active:focus {
  color: #5e5e5e;
  background-color: #c3c3c3;
  border-color: #595959;
}

.button.disabled:focus, .button:disabled:focus {
  background-color: #eeeeee;
  border-color: #999999;
}

.button.disabled:hover, .button:disabled:hover {
  background-color: #eeeeee;
  border-color: #999999;
}

.button.disabled, .button:disabled {
  background: #eeeeee;
  border-color: #eeeeee;
  color: #c1c1c1;
  cursor: not-allowed;
  box-shadow: none;
}
.button--primary,
.button--blue {
  color: #fff;
  background-color: #62b3e5;
  border-color: #2c89c3;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.button--primary:hover,
.button--blue:hover {
  color: #fff;
  background-color: #369ede;
  border-color: #216691;
}

.button--primary:focus,
.button--blue:focus {
  color: #fff;
  background-color: #369ede;
  border-color: #216691;
}

.button--primary:active,
.button--blue:active {
  color: #fff;
  background-color: #369ede;
  border-color: #216691;
  background-image: none;
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.button--primary:active:hover, .button--primary:active:focus,
.button--blue:active:hover,
.button--blue:active:focus {
  color: #fff;
  background-color: #228dce;
  border-color: #15405b;
}

.button--primary.disabled:focus, .button--primary:disabled:focus,
.button--blue.disabled:focus,
.button--blue:disabled:focus {
  background-color: #62b3e5;
  border-color: #2c89c3;
}

.button--primary.disabled:hover, .button--primary:disabled:hover,
.button--blue.disabled:hover,
.button--blue:disabled:hover {
  background-color: #62b3e5;
  border-color: #2c89c3;
}

.button--green {
  color: #fff;
  background-color: #6cc04a;
  border-color: #6cc04a;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.button--green:hover {
  color: #fff;
  background-color: #559f38;
  border-color: #519835;
}

.button--green:focus {
  color: #fff;
  background-color: #559f38;
  border-color: #519835;
}

.button--green:active {
  color: #fff;
  background-color: #559f38;
  border-color: #519835;
  background-image: none;
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.button--green:active:hover, .button--green:active:focus {
  color: #fff;
  background-color: #47852e;
  border-color: #376724;
}

.button--green.disabled:focus, .button--green:disabled:focus {
  background-color: #6cc04a;
  border-color: #6cc04a;
}

.button--green.disabled:hover, .button--green:disabled:hover {
  background-color: #6cc04a;
  border-color: #6cc04a;
}

.button--orange {
  color: #fff;
  background-color: #f78d2d;
  border-color: #f78d2d;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.button--orange:hover {
  color: #fff;
  background-color: #e87309;
  border-color: #de6e08;
}

.button--orange:focus {
  color: #fff;
  background-color: #e87309;
  border-color: #de6e08;
}

.button--orange:active {
  color: #fff;
  background-color: #e87309;
  border-color: #de6e08;
  background-image: none;
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.button--orange:active:hover, .button--orange:active:focus {
  color: #fff;
  background-color: #c66208;
  border-color: #9e4e06;
}

.button--orange.disabled:focus, .button--orange:disabled:focus {
  background-color: #f78d2d;
  border-color: #f78d2d;
}

.button--orange.disabled:hover, .button--orange:disabled:hover {
  background-color: #f78d2d;
  border-color: #f78d2d;
}

.button--red {
  color: #fff;
  background-color: #e56385;
  border-color: #e56385;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.button--red:hover {
  color: #fff;
  background-color: #de3763;
  border-color: #dc2f5c;
}

.button--red:focus {
  color: #fff;
  background-color: #de3763;
  border-color: #dc2f5c;
}

.button--red:active {
  color: #fff;
  background-color: #de3763;
  border-color: #dc2f5c;
  background-image: none;
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.button--red:active:hover, .button--red:active:focus {
  color: #fff;
  background-color: #cf2250;
  border-color: #ac1d42;
}

.button--red.disabled:focus, .button--red:disabled:focus {
  background-color: #e56385;
  border-color: #e56385;
}

.button--red.disabled:hover, .button--red:disabled:hover {
  background-color: #e56385;
  border-color: #e56385;
}