@import (reference) url('../Icon.less');
@import (reference) url('../IconButton.less');

.AppetizeIo-controls {
  form > * {
    margin-right: 0;
  }
}

.AppetizeIo-displayControls {
  align-items: center;
  display: flex;
}

.AppetizeIo-inputContainer {
  align-items: center;
  display: flex;
  padding: var(--gap-m) 0;

  input[type='radio'] {
    display: none;
  }

  input[type='radio'] + label {
    background-color: var(--color-blue3);
    color: var(--color-white);
    cursor: pointer;
    display: inline-block;
    padding: var(--gap-xs) var(--gap-s);
  }

  input[type='radio']:checked + label {
    background-color: var(--color-blue5);
  }
}

iframe[name='AppetizeIoEmbedded'] {
  background: var(--color-white);
  height: 5000px;
  padding: 15px;
  width: 100%;
}

.AppetizeIo-scale {
  align-items: center;
  display: flex;

  input {
    width: 80px;
  }

  span {
    font-size: var(--fontSize-s);
    padding: 0 var(--gap-m) 0 var(--gap-s);
  }
}

.AppetizeIo-rotate,
.AppetizeIo-restorePage {
  color: var(--Link-color);
  cursor: pointer;
  padding: 0 0 0 var(--gap-s);

  &::after {
    &:extend(.Icon all);

    margin-left: var(--gap-xs);
  }
}

.AppetizeIo-restorePage::after {
  content: 'restore_page';
}

.AppetizeIo-rotate::after {
  content: 'screen_rotation';
}
