:host {
  box-sizing: border-box;
  display: block;
  max-height: 100%;
  max-width: 640px;
  min-width: 0;
  padding: 24px;
  user-select: none;
}

.rdio-control {
  .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12px;

    .rdio-button {
      box-sizing: content-box;
      flex: 1;
      line-height: normal;
    }

    .spacer {
      display: block;
      width: 24px;
    }
  }
}

.rdio-display {
  background: rgb(209, 238, 238);
  box-shadow: 2px 2px 4px rgb(0, 0, 0) inset, 1px 1px 2px 1px rgb(255, 255, 255);
  color: rgba(0, 0, 0, 0.8);
  cursor: default;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 8px;

  &.idle {
    background: rgb(190, 190, 174);

    .avoid {
      color: rgb(190, 190, 174);
    }
  }

  * {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .auth {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;

    &.visible {
      visibility: visible;
    }

    > form {
      background: rgb(240, 240, 240);
      border-radius: 8px;
      padding: 8px 32px;

      input {
        text-align: center;
      }
    }
  }

  .flag {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    color: rgb(209, 238, 238);
    margin-left: 4px;
    opacity: 0.12;
    padding: 0 3px;
  }

  .flaged {
    opacity: 0.87;
  }

  .wrapper {
    position: relative;
  }

  .row {
    display: flex;
    flex-direction: row;
    height: 20px;
    justify-content: space-between;

    &.big {
      font-size: 24px;
      height: 32px;
      line-height: 32px;
    }

    &.right {
      justify-content: flex-end;
    }

    &.small {
      font-size: 12px;
      height: 14px;
      line-height: 14px;
    }
  }

  .history {
    border-collapse: collapse;
    font-size: 11px;
    table-layout: fixed;
    width: 100%;

    td,
    th {
      padding: 0 6px;
      text-align: start;

      &:nth-child(1) {
        width: 10%;
      }

      &:nth-child(2) {
        width: 25%;
      }

      &:nth-child(3) {
        width: 25%;
      }

      &:nth-child(4) {
        width: 40%;
      }
    }

    th {
      color: rgba(0, 0, 0, 0.4);
      font-weight: 400;
      text-transform: uppercase;
    }

    tr {
      height: 21px;
    }

    tbody > tr {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
    }
  }
}

.rdio-status {
  .led {
    background: rgb(80, 80, 80);
    display: block;
    height: 12px;
    margin-left: auto;
    width: 24px;

    &.on {
      background: rgb(100, 230, 50);
      box-shadow: 0 0 6px 3px rgb(100, 230, 50);

      &.blue {
        background: rgb(50, 50, 230);
        box-shadow: 0 0 6px 3px rgb(50, 50, 230);
      }

      &.cyan {
        background: rgb(50, 230, 230);
        box-shadow: 0 0 6px 3px rgb(50, 230, 230);
      }

      &.green {
        background: rgb(100, 230, 50);
        box-shadow: 0 0 6px 3px rgb(100, 230, 50);
      }

      &.magenta {
        background: rgb(230, 50, 230);
        box-shadow: 0 0 6px 3px rgb(230, 50, 230);
      }

      &.red {
        background: rgb(230, 50, 50);
        box-shadow: 0 0 6px 3px rgb(230, 50, 50);
      }

      &.white {
        background: rgb(230, 230, 230);
        box-shadow: 0 0 6px 3px rgb(230, 230, 230);
      }

      &.yellow {
        background: rgb(230, 230, 50);
        box-shadow: 0 0 6px 3px rgb(230, 230, 50);
      }
    }

    &.paused {
      animation: led-blink 2s step-end infinite;
    }

    @keyframes led-blink {
      50% {
        background: rgb(80, 80, 80);
        box-shadow: none;
      }
    }
  }
}

.rdio-display,
.rdio-status {
  margin-bottom: 24px;
}
